un Forastero <Webworking>
Javascript's Zeit Ereignisse - Time Events
Mittwoch, 16 September 2009
Mit Javascript ist es möglich, bestimmten Code nach einem spezifischen Zeitintervall auszuführen. 2 Methode sind der Schlüssel zum Erfolg. setTimeout(), um einen Code irgendwann in der Zukunft auszuführen und clearTimeout(), der den setTimeout() beenedet.
Die Methode setTimeout() erwartet 2 Parameter, der 1. Parameter ist Beispielsweise der Funktionsname einer Funktion, die ausgeführt werden soll. Der 2. Parameter ist die Zeitangabe in Millisekunden, die Zeitspanne, nach der die Funktion im 1. Parameter ausgeführt wird. Die Methode kann in eine Variable ausgegeben werden:
var starten=setTimeout(einefunktion(),5000);
In die Variable starten wird das Statement gespeichert. Soll das setTimeout beendet werden, kann man den Variablenname dazu verwenden. Statt des Funktionsnamen im 1. Parameter kann auch ein Statement notiert werden, zum Beispiel alert('5 Sekunden!'). 1000 Millisekunden entsprechen einer 1 Sekunde.
<html>
<head>
<script type="text/javascript">
function Zeitablauf()
{var starten=setTimeout("alert('3 Sekunden!')", 3000);}
</script>
</head>
<body>
<form>
<input type="button" value="Starte!"
onClick="Zeitablauf()" />
</form>
</body>
</html>
Im Beispiel wird durch Klicken auf den Button das Javascript Zeitablauf() gestartet. Nach 3 Sekunden erscheint eine Alert-Box mit der Anzeige 3 Sekunden.
Das letzte Beispiel ist endlich. Um eine unendliche Schleife aufzubauen, müssen wir eine Funktion schreiben, die sich selbst aufruft, wenn eine Zeitspanne abgelaufen ist. Die Funktion muss dabei prüfen, ob sie nicht bereits läuft. Dazu kreieren wir eine Variable zeit_laueft.
<html>
<head>
<script type="text/javascript">
var z=0;
var starten;
var zeit_laueft=0;
function zeitzaehler(){
document.getElementById('speichern').value=z;
z=z+1;
starten=setTimeout("zeitzaehler()", 2000);
}
function derTimer(){
if (!zeit_laueft){
zeit_laueft=1;
zeitzaehler();
}
}
</script>
</head>
<body>
<form>
<input type="button" value="Starte!" onClick="derTimer()">
<input type="text" id="speichern" />
</form>
</body>
</html>
Klicken wir auf den Button "Starte!" wird der Timer, die Funktion derTimer() gestartet. Erst wird geürft, das die Variable zeit_laueft nicht gesetzt ist, ist dem so, wird sie gesetzt und die Funktion zeitzaehler() angestossen. Diese Funktion speichert einen Wert in die Variable z, erhöht die Variable um 1, und ruft sich selbst mit der Methode =setTimeout() wieder auf, nach 2000 Millisekunden.
Kommen wir zur Methode clearTimeout(). Die Methode erwartet nur einen Parameter, den Variablennamen, in den die setTimeout()-Methode gespeichert wurde. Das folgende Beispiel ist wie die unendliche Schleife aus dem vorangegangenen Beispiel. Einziger Unterschied ist der Stop-Button, um die Timer-Funktion zu unterbrechen.
<html>
<head>
<script type="text/javascript">
var z=0;
var starten;
var zeit_laueft=0;
function zeitzaehler(){
document.getElementById('speichern').value=z;
z=z+1;
starten=setTimeout("zeitzaehler()", 1000);
}
function derTimer(){
if(!zeit_laueft){
zeit_laueft=1;
zeitzaehler();
}
}
function stopTimer(){
clearTimeout(starten);
zeit_laueft='';
}
</script>
</head>
<body>
<form>
<input type="button" value="Starte!" onClick="derTimer()">
<input type="text" id="speichern">
<input type="button" value="Stop!" onClick="stopTimer()">
</form>
</body>
</html>