Delays in JavaScript – Code verzögert ausführen mittels Timer

Die verzögerte Ausführung von Code lässt sich in JavaScript mithilfe eines Timers realisieren. Die Funktion hierfür heißt setTimeout und gehört zum globalen Objekt window.

setTimeout(function() {
  // Code, der erst nach 2 Sekunden ausgeführt wird
  alert('Hello World!');
}, 2000);

Die setTimeout Funktion erhält als ersten Parameter die verzögert auszuführende Funktion. Der zweite Parameter bestimmt, wie lange (Angabe in Millisekunden) vor der Ausführung gewartet werden soll.

Im Beispiel oben wurde der setTimeout Funktion eine anonyme Funktion übergeben. Man kann dies auch anders schreiben, indem man die zu übergebene Funktion außerhalb deklariert.

function meineFunktion() {
  alert('Hello World!');
}

setTimeout(meineFunktion, 2000);

Timer können auch ineinander geschachtelt werden.

setTimeout(function() {
  setTimeout(function() {
    // Ausführung nach 6 Sekunden
    alert('Hello World!');
  }, 4000);
}, 2000);

Ein Timer kann vor Ablauf der angegebenen Zeit mit clearTimeout entfernt werden. Der entsprechende Code kommt dann nicht zur Ausführung. Voraussetzung hierfür ist, dass der Timer zuvor in einer Variablen gepeichert wurde.

var meinTimeout = setTimeout(function() {
  alert('Hello World!');
}, 2000);

// Timeout abbrechen            
clearTimeout(meinTimeout);

Eine verwandte Funktion ist setInterval. Hierbei wiederholt sich jedoch die Ausführung der übergebenen Funktion immer wieder nach Ablauf der angegebenen Zeit.

Die jQuery-Bibliothek bietet mit delay auf den ersten Blick eine ähnliche Funktionalität wie setTimeout, sollte aber nicht mir ihr verwechselt werden. delay eignet sich eigentlich nur für das verzögerte Ausführen von jQuery-Animationen auf einem bestimmten DOM-Objekt.

Du arbeitest in einer Agentur oder als Freelancer?
Dann wirf doch mal einen Blick auf unsere Software FeatValue.

Über uns

Wir entwickeln Webanwendungen mit viel Leidenschaft. Unser Wissen geben wir dabei gerne weiter. Mehr über a coding project