JavaScript-Timer entdecken

setTimeout()

Beim Schreiben von JavaScript-Code kann es vorkommen, dass Sie die Ausführung einer Funktion verzögern möchten.

Das ist die Aufgabe von setTimeout. Sie geben eine Callback-Funktion an, die später ausgeführt werden soll, und einen Wert, der angibt, wie viel später sie ausgeführt werden soll, in Millisekunden:

setTimeout(() => {
  // wird nach 2 Sekunden ausgeführt
}, 2000)
setTimeout(() => {
  // wird nach 50 Millisekunden ausgeführt
}, 50)

Diese Syntax definiert eine neue Funktion. Sie können jede beliebige andere Funktion darin aufrufen oder einen vorhandenen Funktionsnamen und eine Reihe von Parametern übergeben:

const myFunction = (firstParam, secondParam) => {
  // tue etwas
}
// wird nach 2 Sekunden ausgeführt
setTimeout(myFunction, 2000, firstParam, secondParam)

setTimeout gibt die Timer-ID zurück. Diese wird in der Regel nicht verwendet, aber Sie können diese ID speichern und sie löschen, wenn Sie diese geplante Funktionsausführung löschen möchten:

const id = setTimeout(() => {
  // sollte nach 2 Sekunden ausgeführt werden
}, 2000)
// Ich habe es mir anders überlegt
clearTimeout(id)

Null-Verzögerung

Wenn Sie die Timeout-Verzögerung auf 0 setzen, wird die Callback-Funktion so schnell wie möglich ausgeführt, aber nach der aktuellen Funktionsausführung:

setTimeout(() => {
  console.log('nach ')
}, 0)
console.log(' vor ')

Dieser Code gibt Folgendes aus

vor
nach

Dies ist besonders nützlich, um zu vermeiden, dass die CPU bei intensiven Aufgaben blockiert wird und andere Funktionen ausgeführt werden können, während eine rechenintensive Berechnung durchgeführt wird, indem Funktionen im Scheduler in die Warteschlange gestellt werden.

TIP

Einige Browser (IE und Edge) implementieren eine setImmediate()-Methode, die genau die gleiche Funktionalität bietet, aber sie ist nicht standardmäßig und in anderen Browsern nicht verfügbar. Aber es ist eine Standardfunktion in Node.js.

setInterval()

setInterval ist eine Funktion, die setTimeout ähnelt, mit einem Unterschied: Anstatt die Callback-Funktion einmal auszuführen, wird sie immer wieder in dem von Ihnen angegebenen Zeitintervall (in Millisekunden) ausgeführt:

setInterval(() => {
  // wird alle 2 Sekunden ausgeführt
}, 2000)

Die obige Funktion wird alle 2 Sekunden ausgeführt, es sei denn, Sie weisen sie an, mit clearInterval anzuhalten, indem Sie die von setInterval zurückgegebene Intervall-ID übergeben:

const id = setInterval(() => {
  // wird alle 2 Sekunden ausgeführt
}, 2000)
// Ich habe es mir anders überlegt
clearInterval(id)

Es ist üblich, clearInterval innerhalb der setInterval-Callback-Funktion aufzurufen, um automatisch zu bestimmen, ob sie wieder ausgeführt oder angehalten werden soll. Beispielsweise führt dieser Code etwas aus, solange App.somethingIWait nicht den Wert arrived hat:

Rekursives setTimeout

setInterval startet eine Funktion alle n Millisekunden, ohne zu berücksichtigen, wann eine Funktion ihre Ausführung beendet hat.

Wenn eine Funktion immer die gleiche Zeit benötigt, ist alles in Ordnung.

Vielleicht dauert die Ausführung der Funktion je nach Netzwerkbedingungen unterschiedlich lange.

Und vielleicht überschneidet sich eine lange Ausführung mit der nächsten.

Um dies zu vermeiden, können Sie ein rekursives setTimeout planen, das aufgerufen wird, wenn die Callback-Funktion beendet ist:

const myFunction = () => {
  // irgendwas machen
  setTimeout(myFunction, 1000)
}
setTimeout(myFunction, 1000)

setTimeout und setInterval sind in Node.js über das Timers-Modul verfügbar.

Node.js bietet auch setImmediate(), was gleichbedeutend ist mit der Verwendung von setTimeout(() => {}, 0), das hauptsächlich für die Arbeit mit dem Node.js Event Loop verwendet wird.