So verwenden Sie das JavaScript-Äquivalent von Sleep, Wait, Delay und Pause

Blog

So verwenden Sie das JavaScript-Äquivalent von Sleep, Wait, Delay und Pause

So verwenden Sie das JavaScript-Äquivalent von Sleep, Wait, Delay und Pause

JavaScript ist die Sprache des Webs. JS ist seit der Veröffentlichung von ES5 nicht mehr dasselbe. Immer mehr Ideen und Features werden aus verschiedenen Sprachen portiert und in JavaScript integriert. Eine solche Funktion ist Promises, die wahrscheinlich am häufigsten in JavaScript verwendet wurde, nachdem ES5 veröffentlicht wurde.

Aber eines der Dinge, die JavaScript vermisst, ist die Möglichkeit, die Ausführung für eine Weile zu unterbrechen und später wieder aufzunehmen. In diesem Beitrag werde ich diskutieren, wie Sie das erreichen können und was es wirklich bedeutet, in JavaScript zu pausieren oder zu schlafen. Spoiler: JavaScript pausiert nie wirklich

TL; DR

Hier ist der Copy-Pasta-Code, der die Arbeit erledigen würde:

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

Aber was passiert hier wirklich?

setTimeout und die falschen Versprechen

Sehen wir uns ein kurzes Beispiel mit dem obigen Snippet an (wir werden später besprechen, 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() }

Diese Funktion |_+_| würde beim Aufruf einfach das |_+_| . ausführen Funktion, warte ca. 5 Sekunden , und rufen Sie dann dieselbe Funktion erneut auf. Beachten Sie, wie ich geschrieben habe ca. 5 Sekunden , und nicht 5 Sekunden.

Ein starker Hinweis an dieser Stelle, der obige Code garantiert keinen perfekten Schlaf. Dies bedeutet, dass JavaScript, wenn Sie eine Dauer von beispielsweise 1 Sekunde angeben garantiert nicht dass es nach dem Schlaf genau nach 1 Sekunde mit der Ausführung des Codes beginnen würde. Wieso den? Sie können fragen. Das liegt leider daran, dass Timer in JavaScript und im Allgemeinen in Ereignisschleifen funktionieren. JavaScript garantiert jedoch absolut, dass das Codestück nach dem Ruhezustand niemals ausgeführt wird Vor die besagte Zeit, also haben wir nicht wirklich eine völlig unbestimmte Situation, nur eine teilweise und in den meisten Fällen nur innerhalb von wenigen Millisekunden.

JavaScript ist Singlethread

Ein einzelner Thread bedeutet, dass der JavaScript-Prozess nicht wirklich aus dem Weg gehen kann. Es muss alle Dinge tun – von Ereignis-Listenern bis hin zu HTTP-Callbacks im selben Hauptthread. 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 Schlaf für sagen wir 10 Sekunden zu simulieren. Was erwarten Sie, würde passieren?

Gar nichts. Ihre Webseite würde einwandfrei funktionieren, Ihre Schaltflächen würden reagieren, und sobald der 10-Sekunden-Schlaf beendet ist, würde der Code daneben ausgeführt. Es ist also offensichtlich, dass JavaScript nicht wirklich den gesamten Hauptthread blockiert hat, denn wenn dies der Fall wäre, sollte Ihre Webseite eingefroren sein und die Schaltflächen sollten nicht mehr anklickbar sein. Wie hat JavaScript also tatsächlich einen einzelnen Thread angehalten, ohne ihn jemals wirklich zu pausieren?

Treffen Sie die Event-Schleife

Im Gegensatz zu anderen Sprachen führt JavaScript Code nicht nur linear von oben nach unten aus. Es ist eine asynchrone ereignisgesteuerte Sprache mit einer Menge Magie in Form von Ereignisschleifen. Die Ereignisschleife teilt Ihren Code in synchrone und bestimmte Ereignisse auf - wie Timer und HTTP-Anforderungen. Genau genommen gibt es zwei Warteschlangen – Aufgabenwarteschlange und Mikroaufgabenwarteschlange. Wann immer Sie JS ausführen und es eine asynchrone Sache gibt (wie ein Mausklick-Ereignis oder ein Versprechen), wirft JavaScript es in die Aufgabenwarteschlange (oder Mikroaufgabenwarteschlange) und wird weiter ausgeführt. Wenn es einen einzelnen Tick abschließt, überprüft es, ob Aufgabenwarteschlangen und Mikroaufgabenwarteschlangen 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 Tiefenbearbeitung der Ereignisschleife interessiert, dieses Video anzusehen:

Abschluss

Sie sind hierher gekommen, um eine einfache Schlafanweisung in JavaScript zu erhalten, und haben am Ende etwas über eines der Kerndinge von JavaScript gelernt - die Ereignisschleife! Erstaunlich, nicht wahr?

Ursprünglich veröffentlicht von Mehul Mohan at https://www.freecodecamp.org

#javascript #web-entwicklung