Zeitsteuerung

Immer wieder kann es vorkommen, dass wir einen bestimmten JS-Code mit einer Verzögerung oder auch zyklisch ausführen wollen. Hierfür bietet JavaScript die Funktionen setTimeout() und setInterval(), welche innerhalb dieses Themas noch genauer erklärt werden.

Timeout

Die Funktion setTimeout() ist eine Funktion des window-Objekts und erlaubt es, einen Code mit einer Verzögerung (nach Ablauf eines Timeouts) auszuführen. Der Funktion wird als Parameter eine Funktion (als Ausdruck oder Referenz) übergeben. Der zweite Parameter muss ebenfalls angegeben werden und legt die Verzögerungszeit in Millisekunden fest. Im untenstehenden Beispiel wechselt das ursprünglich rot gefärbte Rechteck nach dem Ablauf von 3 Sekunden (3000 Millisekunden) die Farbe nach blau.

window.setTimeout(function ()
{
	document.getElementById("rechteck").style.backgroundColor = "blue";
}, 3000);

Manchmal kann es vorkommen, dass wir ein gestartetes Timeout wieder stoppen wollen. Hierzu müssen wir uns lediglich den Rückgabewert der setTimeout()-Funktion merken und diesen als Wert der Funktion clearTimeout() übergeben. Dadurch wird das gestartete Timeout wieder beendet und die Funktion wird nicht aufgerufen. Im folgenden Beispiel wird zusätzlich zu dem Rechteck ein Button angezeigt. Wird auf diesen geklickt, so wird das Timeout beendet (wodurch die rote Farbe des Rechtecks erhalten bleibt) und der Button ausgeblendet. Wird innerhalb der 3 Sekunden nicht auf den Button gedrückt, so ändert sich die Farbe des Rechtecks in blau und der Button wird anschließend ebenfalls ausgeblendet.

<div id="rechteck" style="width: 200px; height: 200px; background-color: red;"></div>
<form>
    <input type="button" id="button" value="Timeout abbrechen" onclick="TimeoutBeenden()" />
</form>

var timer = window.setTimeout(function ()
{
	document.getElementById("rechteck").style.backgroundColor = "blue";
	document.getElementById("button").style.display = "none";
}, 3000);

function TimeoutBeenden()
{
	window.clearTimeout(timer);
	document.getElementById("button").style.display = "none";
}

Intervall

Die Funktion setInterval() erlaubt es, einen Code zyklisch auszuführen. Die Funktion ist von den Parametern gleich aufgebaut wie die Funktion setTimeout(), wovon der zweite Parameter natürlich nicht das Timeout, sondern den Intervall festlegt.

var list = new Array("blue", "lime", "pink", "yellow", "green", "orange", "black", "red");
var idx = 0;

window.setInterval(function ()
{
	document.getElementById("rechteck").style.backgroundColor = list[idx];
	idx = (idx + 1) % list.length;
}, 1000);

Um einen Intervall zu beenden, gibt es die Funktion clearInterval(). Um diese Funktion aufrufen zu können, benötigen wir den Wert, welcher von setInterval() zurückgegeben wurde.