Bei einer Webapplication möchte man dem Nutzer gerne oft eine Meldung anzeigen, die von Erfolg, Fehler etc. berichtet. Mit Prototype und script.aculo.us kann man diesen Vorgang simpel aufhübschen. Der Container wird befüllt, angezeigt und wieder ausgeblendet. Leider kann man Effect.Fade(…) keinen Paramater übergeben, der sagt, nach wie vielen Sekunden die Nachricht wieder ausgeblendet werden soll. Somit kann der Zeitraum, in dem man die Meldung lesen kann sehr kurz sein.

Der Code würde wie folgt aussehen:

$( 'message' ).innerHTML = 'Die Nachricht!';
new Effect.Appear( 'message' );
new Effect.Highlight( 'message' );
new Effect.Fade( 'message' );

Aus diesem Grund habe ich mit Hilfe von Prototype eine kleine Hilfsklasse geschrieben, die es erlaubt, Events zeitgesteuert auszuführen. Zusätzlich kann man noch festlegen, wie oft ein Event wiederholt werden soll.

Hier der Code:

/* class Interval */
var Interval = Class.create();
Interval.prototype = {
	/// handler, timeout in seconds || 5, repeat count || 1 (-1:endless)
	initialize: function( handler, timeout, count ) {
			if( typeof handler == 'function' ) {
			var index = 0;
			var handle = window.setInterval(
				function() {
					try {
						handler();
					}
					catch( e ){
					}
					if( ++index == ( count || 1 ) ) {
						window.clearInterval( handle );
					}
				}, 
				( timeout || 5 ) * 1000
			)
		};
	}
}
/* end class Interval */

Default ist, das ein Event nach 5 Sekunden ausgeführt wird und nicht wiederholt wird. Der Code zum anzeigen der Meldung würde dann so aussehen:

$( 'message' ).innerHTML = 'Die Nachricht!';
new Effect.Appear( 'message' );
new Effect.Highlight( 'message' );
new Interval( function() { new Effect.Fade( 'message' ) } );

Die Funktion wird ohne zusätzliche Parameter aufgerufen, das Event wird nach 5 Sekunden ausgelöst und nicht wiederholt. Ein Aufruf mit -1 als 3. Parameter würde das Event sich endlos wiederholen lassen.

Links:
Prototype
script.aculo.us