Javascript Delays oder Timing Events sind Funktionen, die es ermöglichen, Aktionen in einer bestimmten Zeit nach einem Trigger auszuführen. Sie sind häufig in der Entwicklung von Benutzeroberflächen und animierten Inhalten verwendet.
Viele Programmiersprachen verfügen über eine Sleep-Funktion, die die Ausführung eines Programms für eine bestimmte Anzahl von Sekunden verzögert. Diese Funktionalität fehlt jedoch in JavaScript aufgrund seiner asynchronen Natur.
Zwei wichtige Timing-Funktionen in Javascript sind setTimeout und setInterval.
setTimeout führt eine Funktion nach einer bestimmten Zeitspanne aus. Sie kann verwendet werden, um eine Funktion nach einer bestimmten Zeit zu starten, z.B. um eine animierte Überblendung zu starten, wenn ein Benutzer eine Seite besucht.
setTimeout gehört zum globalen Objekt window. Obwohl man window nicht zwingend mit angeben muss.
window.setTimeout(function, milliseconds);
Der erste Parameter ist die Funktion, die ausgeführt werden soll und der zweite Parameter gibt die Zeit in Millisekunden an, die gewartet werden soll (Delay) bevor die Funktion aufgerufen wird.
setTimeout(function() {
// Nach 10 Sekunden wird der Code ausgeführt (1000millisekunden = 1 Sek)
alert('Hallo Welt!');
}, 10000);
setTimeout ist eine asynchrone Methode.
In folgendem Beispiel läuft das Script weiter und zeigt „Auf Wiedersehen“ vor „Welt“ an.
console.log("Hallo");
setTimeout(() => { console.log("Welt!"); }, 2000);
console.log("Auf Wiedersehen!");
Hallo
Auf Wiedersehen!
Welt!
setInterval ist ähnlich, aber es führt eine Funktion in regelmäßigen Abständen aus.
Javascript Delay stoppen
Um den Timer vor Ablauf der Zeit zu stoppen, kannst Du clearTimeout oder clearInterval nutzen. Voraussetzung hierfür ist, dass der Timer zuvor in einer Variablen gepeichert wurde.
window.clearTimeout(timeoutVariable)
window.clearTimeout(timeoutVariable)
