JavaScript setTimeout Tutorial - Verwendung des JS-Äquivalents aus Schlaf, Warten, Verzögerung und Pause

JavaScript ist die Sprache des Webs. Und seit der Veröffentlichung von ES5 war es nicht mehr dasselbe. Immer mehr Ideen und Funktionen werden aus verschiedenen Sprachen portiert und in JavaScript integriert.

Eine dieser Funktionen sind Promises, die nach der Veröffentlichung von ES5 wahrscheinlich die am häufigsten verwendete Funktion in JavaScript sind.

Eines der Dinge, die JavaScript vermisst, ist die Möglichkeit, die Ausführung für eine Weile anzuhalten und später fortzusetzen. In diesem Beitrag werde ich diskutieren, wie Sie dies erreichen können und was es wirklich bedeutet, in JavaScript "anzuhalten" oder "zu schlafen".

Spoiler: JavaScript "pausiert" nie wirklich.

TL; DR

Hier ist der Copy-Pasta-Code, der die Arbeit erledigt:

/** * * @param duration Enter duration in seconds */ function sleep(duration) { return new Promise(resolve => { setTimeout(() => { resolve() }, duration * 1000) }) }

Aber was passiert hier wirklich?

setTimeout und gefälschte Versprechen

Sehen wir uns ein kurzes Beispiel mit dem obigen Snippet an (wir werden später diskutieren, was darin passiert):

async function performBatchActions() { // perform an API call await performAPIRequest() // sleep for 5 seconds await sleep(5) // perform an API call again await performAPIRequest() }

performBatchActionsWenn diese Funktion aufgerufen wird, führt sie die performAPIRequestFunktion einfach aus , wartet etwa 5 Sekunden und ruft dann dieselbe Funktion erneut auf. Beachten Sie, wie ich ungefähr 5 Sekunden und nicht 5 Sekunden geschrieben habe.

Ein starker Hinweis: Der obige Code garantiert keinen perfekten Schlaf. Wenn Sie eine Dauer von beispielsweise 1 Sekunde angeben, garantiert JavaScript nicht, dass der Code nach dem Ruhezustand genau nach 1 Sekunde ausgeführt wird.

Warum nicht? Sie können fragen. Leider liegt es daran, dass Timer in JavaScript und im Allgemeinen in Ereignisschleifen funktionieren. JavaScript garantiert jedoch absolut, dass der Code nach dem Ruhezustand niemals vor der angegebenen Zeit ausgeführt wird.

Wir haben also nicht wirklich eine vollständige unbestimmte Situation, nur eine teilweise. In den meisten Fällen liegt der Wert nur wenige Millisekunden.

JavaScript ist Single-Threaded

Ein einzelner Thread bedeutet, dass ein JavaScript-Prozess überhaupt nicht wirklich aus dem Weg gehen kann. Es muss alles tun - von Ereignis-Listenern bis zu HTTP-Rückrufen im selben Haupt-Thread. Und wenn eine Sache ausgeführt wird, kann eine andere nicht ausgeführt werden.

Stellen Sie sich eine Webseite vor, auf der Sie mehrere Schaltflächen haben und den obigen Code ausführen, um einen Ruhezustand für beispielsweise 10 Sekunden zu simulieren. Was erwarten Sie, wird passieren?

Gar nichts. Ihre Webseite funktioniert einwandfrei, Ihre Schaltflächen reagieren und sobald der 10-Sekunden-Ruhezustand abgeschlossen ist, wird der Code daneben ausgeführt. Es ist also offensichtlich, dass JavaScript nicht wirklich den gesamten Haupt-Thread blockiert, da sonst Ihre Webseite eingefroren wäre und die Schaltflächen nicht mehr anklickbar wären.

Wie hat JavaScript einen einzelnen Thread tatsächlich angehalten, ohne ihn jemals wirklich anzuhalten?

Treffen Sie die Event-Schleife

Im Gegensatz zu anderen Sprachen führt JavaScript den Code nicht nur linear von oben nach unten aus. Es ist eine asynchrone ereignisgesteuerte Sprache mit einer Menge Magie in Form der Ereignisschleife.

Eine Ereignisschleife teilt Ihren Code in synchrone und bestimmte Ereignisse auf - wie Timer und HTTP-Anforderungen. Genau genommen gibt es zwei Warteschlangen - eine Task-Warteschlange und eine Mikrotask-Warteschlange.

Immer wenn Sie JS ausführen und es eine asynchrone Sache gibt (wie ein Mausklick-Ereignis oder ein Versprechen), wirft JavaScript es in die Task-Warteschlange (oder Mikrotask-Warteschlange) und führt es weiter aus. Wenn ein "einzelner Tick" abgeschlossen ist, wird überprüft, ob die Task-Warteschlangen und die Mikrotask-Warteschlange etwas Arbeit dafür haben. Wenn ja, wird der Rückruf ausgeführt / eine Aktion ausgeführt.

Ich würde wirklich jedem empfehlen, der sich für die detaillierte Funktionsweise von Event-Loops interessiert, dieses Video anzusehen:

Fazit

Sie kamen hierher, um eine einfache Schlafanweisung in JavaScript zu erhalten, und lernten schließlich eines der wichtigsten Dinge in JavaScript kennen - Ereignisschleifen! Erstaunlich, nicht wahr?

Wenn Ihnen der Artikel gefallen hat, besuchen Sie codedamn - eine Plattform, die ich für Entwickler und Lernende wie Sie erstellt habe. Lassen Sie uns auch über soziale Medien - Twitter und Instagram - eine Verbindung herstellen. Bis bald!

Frieden