So versetzen Sie JavaScript in den Ruhezustand oder in den Wartezustand

Überblick

JavaScript verfügt nicht über die Funktion sleep(), die dazu führen würde, dass der Code für eine bestimmte Zeitspanne wartet, bevor die Ausführung fortgesetzt wird. Wenn JavaScript warten muss, wie machen Sie das?

Angenommen, Sie möchten drei Nachrichten mit einer Verzögerung von einer Sekunde zwischen den einzelnen Nachrichten in der Javascript-Konsole protokollieren. Da es in JavaScript keine sleep()-Methode gibt, können Sie es mit der nächstbesten Methode versuchen: setTimeout().

Leider funktioniert setTimeout() je nach Verwendung nicht ganz wie erwartet. Sie haben dies wahrscheinlich irgendwann in Ihrer JavaScript-Schleife versucht und festgestellt, dass setTimeout() einfach nicht zu funktionieren scheint.

Das Problem entsteht durch die Fehlinterpretation von setTimeout() als sleep()-Funktion, obwohl die Funktion tatsächlich nach ihren eigenen Regeln arbeitet.

Beim Durchsehen der Dokumentation für setTimeout() scheint ein „Verzögerungs“-Parameter in Millisekunden erforderlich zu sein.

Zurück zum ursprünglichen Problem: Sie haben versucht, „setTimeout(1000)“ aufzurufen, um zwischen zwei Aufrufen der Funktion console.log() 1 Sekunde zu warten.

Leider funktioniert setTimeout() nicht auf diese Weise:

setzeTimeout(1000)
console.log(1)
setzeTimeout(1000)
console.log(2)
setzeTimeout(1000)
console.log(3)

für (lass i = 0; i <= 3; i++) {
  setzeTimeout(1000)
  konsole.log(`#${i}`)
}

Dieser Code führt zu überhaupt keiner Verzögerung, als ob setTimeout() nicht existieren würde.

Wenn Sie in der Dokumentation noch einmal nachsehen, werden Sie feststellen, dass das Problem darin besteht, dass das erste Argument eigentlich ein Funktionsaufruf und keine Verzögerung sein sollte. Schließlich ist setTimeout() nicht wirklich eine sleep()-Methode.

Sie schreiben den Code so um, dass er als erstes Argument eine Rückruffunktion und als zweites Argument die erforderliche Verzögerung übernimmt:

setTimeout(() => console.log(1), 1000)
setTimeout(() => console.log(2), 1000)
setTimeout(() => console.log(3), 1000)

für (lass i = 0; i <= 3; i++) {
  setTimeout(() => console.log(`#${i}`), 1000)
}

Auf diese Weise werden die Protokollinformationen der drei console.log-Aufrufe nach einer einzigen Verzögerung von 1000 ms (1 Sekunde) zusammen angezeigt, anstatt wie idealerweise eine Verzögerung von 1 Sekunde zwischen jedem wiederholten Aufruf eintreten würde.

Bevor wir besprechen, wie sich dieses Problem beheben lässt, schauen wir uns die Funktion setTimeout() genauer an.

Überprüfen von setTimeout()

Möglicherweise ist Ihnen im zweiten Codeausschnitt oben die Verwendung von Pfeilfunktionen aufgefallen. Diese sind erforderlich, da Sie eine anonyme Rückruffunktion an setTimeout() übergeben müssen, die den Code ausführt, der nach dem Timeout ausgeführt werden soll.

In einer anonymen Funktion können Sie beliebigen Code angeben, der nach Ablauf der Zeitüberschreitung ausgeführt werden soll:

// Anonyme Rückruffunktion mit Pfeilsyntax.
setTimeout(() => console.log("Hallo!"), 1000)
// Dies entspricht der Verwendung des Funktionsschlüsselworts setTimeout(function() { console.log("Hello!") }, 1000)

Theoretisch könnten Sie einfach die Funktion als erstes Argument und die Argumente des Rückrufs als die restlichen Argumente übergeben, aber das scheint bei mir nie richtig zu funktionieren:

// Sollte funktionieren, aber nicht setTimeout(console.log, 1000, "Hallo")

Um dieses Problem zu lösen, werden manchmal Zeichenfolgen verwendet, aber das ist nicht zu empfehlen. Das Ausführen von JavaScript aus einem String hat Auswirkungen auf die Sicherheit, da jeder böswillige Akteur beliebigen Code ausführen kann, der als String eingefügt ist.

// Sollte nicht funktionieren, funktioniert aber setTimeout(`console.log("Hello")`, 1000)

Warum ist setTimeout() in unserem ersten Satz Codebeispiele fehlgeschlagen? Es scheint, als würden wir es richtig verwenden, die Verzögerung von 1000 ms wird jedes Mal wiederholt.

Der Grund dafür ist, dass setTimeout() als synchroner Code ausgeführt wird und mehrere Aufrufe von setTimeout() gleichzeitig ausgeführt werden. Jeder Aufruf von setTimeout() erstellt asynchronen Code, der später, nach der angegebenen Verzögerung, ausgeführt wird. Da jede Verzögerung im Codeausschnitt gleich ist (1000 Millisekunden), wird der gesamte in die Warteschlange gestellte Code nach einer einzelnen Verzögerung von 1 Sekunde gleichzeitig ausgeführt.

Wie bereits erwähnt handelt es sich bei setTimeout() nicht wirklich um eine sleep()-Funktion. Stattdessen wird lediglich asynchroner Code zur späteren Ausführung in die Warteschlange gestellt. Glücklicherweise können Sie mit setTimeout() Ihre eigene sleep()-Funktion in JavaScript erstellen.

So schreiben Sie eine Sleep-Funktion

Mit der Leistungsfähigkeit von Promises, async und await können Sie eine sleep()-Funktion schreiben, die sich wie erwartet verhält.

Sie können diese benutzerdefinierte sleep()-Funktion jedoch nur innerhalb einer asynchronen Funktion aufrufen und müssen sie mit dem Schlüsselwort await verwenden.

Dieser Code zeigt, wie eine sleep()-Funktion geschrieben wird:

const sleep = (Verzögerung) => neues Promise((Auflösung) => setTimeout(Auflösung, Verzögerung))

const wiederholte Grüße = async () => {
  warte auf Schlaf (1000)
  console.log(1)
  warte auf Schlaf (1000)
  console.log(2)
  warte auf Schlaf (1000)
  console.log(3)
}
wiederholte Grüße()

Diese JavaScript-Funktion sleep() funktioniert genau wie erwartet, da await dazu führt, dass die synchrone Ausführung Ihres Codes angehalten wird, bis das Promise eingelöst ist.

Eine einfache Wahl

Alternativ können Sie im ersten Aufruf von setTimeout() ein inkrementelles Timeout angeben.

Der folgende Code entspricht dem vorherigen Beispiel:

setTimeout(() => console.log(1), 1000)
setTimeout(() => console.log(2), 2000)
setTimeout(() => console.log(3), 3000)

Die Verwendung eines zunehmenden Timeouts funktioniert, weil der Code gleichzeitig ausgeführt wird, sodass die angegebene Rückruffunktion nach 1, 2 und 3 Sekunden der synchronen Codeausführung ausgeführt wird.

Wird es in einer Schleife ausgeführt?

Wie zu erwarten, funktionieren beide Optionen zum Anhalten der JavaScript-Ausführung innerhalb einer Schleife einwandfrei. Sehen wir uns zwei einfache Beispiele an.

Hier ist ein Codeausschnitt mit einer benutzerdefinierten sleep()-Funktion:

const sleep = (Verzögerung) => neues Promise((Auflösung) => setTimeout(Auflösung, Verzögerung))

asynchrone Funktion repeatGreetingsLoop() {
  für (lass i = 0; i <= 5; i++) {
      warte auf Schlaf (1000)
    console.log(`Hallo #${i}`)
    }
}
repeatGreetingsLoop()

Hier ist ein einfacher Codeausschnitt mit zunehmender Timeout-Rate:

für (lass i = 0; i <= 5; i++) {
  setTimeout(() => console.log(`Hallo #${i}`), 1000 * i)
}

Ich bevorzuge die letztere Syntax, insbesondere für die Verwendung in Schleifen.

Zusammenfassen

JavaScript verfügt möglicherweise nicht über die Funktion sleep() oder wait(), Sie können jedoch mithilfe der integrierten Funktion setTimeout() leicht eine solche Funktion erstellen, solange Sie diese mit Vorsicht verwenden.

setTimeout() kann nicht selbst als sleep()-Funktion verwendet werden, Sie können jedoch mit async und await eine benutzerdefinierte JavaScript-sleep()-Funktion erstellen.

Mit einem anderen Ansatz können Sie gestaffelte (zunehmende) Timeouts an setTimeout() übergeben, um die Funktion sleep() zu emulieren. Dies funktioniert, weil alle Aufrufe von setTimeout() synchron ausgeführt werden, wie es in JavaScript normalerweise der Fall ist.

Hoffentlich hilft Ihnen dies dabei, etwas Latenz in Ihren Code einzuführen – indem Sie nur Vanilla JavaScript verwenden, ohne dass externe Bibliotheken oder Frameworks erforderlich sind.

Oben finden Sie Einzelheiten dazu, wie Sie JavaScript in den Ruhezustand oder Wartezustand versetzen. Weitere Informationen zum Ruhezustand oder Wartezustand von JavaScript finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!