4.1 Funktion setTimeout
Timer in JavaScript ermöglichen es, bestimmte Aktionen in festgelegten Zeitabständen auszuführen. Die beiden Hauptmethoden
zur Arbeit mit Timern sind setTimeout() und setInterval(). Sie werden verwendet, um Code
mit Verzögerung oder in regelmäßigen Abständen auszuführen.
Die Methode setTimeout() erlaubt es, eine Funktion einmal nach einer bestimmten Anzahl an Millisekunden
auszuführen. Das ist praktisch für die verzögerte Ausführung von Code.
Syntax:
const timeoutID = setTimeout(callback, delay, ...args);
Wo:
callback: die Funktion, die ausgeführt wirddelay: die Verzögerung in Millisekunden vor der Ausführung der Funktionargs: zusätzliche Argumente, die an die Funktioncallbackübergeben werden
Beispiel für die Verwendung von setTimeout():
// Funktion, die nach 2 Sekunden ausgeführt wird
function greet() {
console.log('Hello, world!');
}
// Timer setzen
const timeoutID = setTimeout(greet, 2000);
4.2 Abbrechen des Timers setTimeout
Wenn du die Ausführung einer mit setTimeout() geplanten Funktion abbrechen möchtest, kannst du die Methode clearTimeout() verwenden:
// Funktion, die nach 2 Sekunden ausgeführt wird
function greet() {
console.log('Hello, world!');
}
// Timer setzen
const timeoutID = setTimeout(greet, 2000);
// Timer abbrechen
clearTimeout(timeoutID);
Beispiel mit zusätzlichen Argumenten:
// Funktion, die nach 2 Sekunden mit Argumenten ausgeführt wird
function greet(name) {
console.log(`Hello, ${name}!`);
}
// Timer setzen mit Übergabe eines Arguments
const timeoutID = setTimeout(greet, 2000, 'Alice');
4.3 Funktion setInterval
Die Methode setInterval() erlaubt es, eine Funktion wiederholt in festgelegten Zeitintervallen auszuführen. Das ist nützlich
für die periodische Ausführung von Code.
Syntax:
const intervalID = setInterval(callback, delay, ...args);
Wo:
callback: die Funktion, die ausgeführt wirddelay: das Intervall in Millisekunden zwischen den Aufrufen der Funktionargs: zusätzliche Argumente, die an die Funktioncallbackübergeben werden
Beispiel für die Verwendung von setInterval:
// Funktion, die alle 2 Sekunden ausgeführt wird
function greet() {
console.log('Hello, world!');
}
// Intervall setzen
const intervalID = setInterval(greet, 2000);
4.4 Abbrechen des Intervalls setInterval
Wenn du die wiederholte Ausführung einer Funktion beenden möchtest, kannst du die Methode clearInterval() verwenden.
// Funktion, die alle 2 Sekunden ausgeführt wird
function greet() {
console.log('Hello, world!');
}
// Intervall setzen
const intervalID = setInterval(greet, 2000);
// Intervall nach 10 Sekunden abbrechen
setTimeout(() => {
clearInterval(intervalID);
console.log('Interval cleared');
}, 10000);
Beispiel mit zusätzlichen Argumenten:
// Funktion, die alle 2 Sekunden mit Argumenten ausgeführt wird
function greet(name) {
console.log(`Hello, ${name}!`);
}
// Intervall setzen mit Übergabe eines Arguments
const intervalID = setInterval(greet, 2000, 'Alice');
4.5 Beispiele für praktische Anwendungen
Beispiel 1: Automatische Aktualisierung der Zeit
<!DOCTYPE html>
<html>
<head>
<title>Auto-update Time</title>
</head>
<body>
<h1>Current Time</h1>
<div id="time"></div>
<script>
function updateTime() {
const now = new Date();
const timeString = now.toLocaleTimeString();
document.getElementById('time').textContent = timeString;
}
// Aktualisierung der Zeit jede Sekunde
updateTime();
setInterval(updateTime, 1000);
</script>
</body>
</html>
Beispiel 2: Periodische Datenanfragen
// Funktion zur Emulation einer Datenanfrage
function fetchData() {
console.log('Fetching data...');
// Hier kann eine echte Anfrage an den Server gestellt werden
}
// Ausführung der Datenanfrage alle 10 Sekunden
const intervalID = setInterval(fetchData, 10000);
// Anfragen nach 1 Minute stoppen
setTimeout(() => {
clearInterval(intervalID);
console.log('Stopped fetching data');
}, 60000);
GO TO FULL VERSION