Ereignisschleifen in JavaScript | Mit Beispielen erklärt
Der Global Execution -Kontext behält einen Stapel aller ausführenden Funktionen bei, er funktioniert auf dem Verhalten. “zuletzt rein, zuerst raus”. Während die Web -API -Umgebung die Funktionen aufnimmt, die Teil der Web -API (API -Anrufe, Ajax Call, SetTimeout () und mehr) aus dem Ausführungsstapel sind und sie in seiner eigenen Umgebung ausführen beginnt. Dadurch kann der Ausführungsstapel wiederum an etwas anderem arbeiten und so ein asynchrones Verhalten implementieren.
Wenn die Web -API die Ausführung der Funktion beendet, legt sie das Ergebnis in die Ereigniswarteschlange. Immer wenn der Ausführungsstapel leer ist, nimmt die Event Loop die Funktion im Ereigniswarte. Dieser ganze Kreis ist als der bekannt Ereignisschleifen In JavaScript.
Probieren Sie diesen einfachen sequentiellen Code aus:
Funktion f2 ()Konsole.log ("Inside -Funktion f2");
Konsole.log ("f2 ist fertig");
Funktion f1 ()
Konsole.log ("Inside -Funktion F1");
f2 ();
Konsole.log ("Ende der Funktion f1");
F1 ();
Die Ausgabe dieses Codes ist als
Dieser Code sieht im Ausführungsstapel so aus:
Der Stapel funktioniert in dieser Reihenfolge:
- Zeiger geht hinein F1, und führt den Befehl aus, um "Inside Function F1" zu drucken, und entfernt ihn aus dem Stapel
- Zeiger sieht die Linie f2 () und geht in die f2
- Zeiger führt "Inside Function F2" aus und entfernt ihn aus dem Stapel
- Druckt die Zeilen „F2 hat das Arbeiten beendet“ und entfernt sie aus dem Stapel
- Seit f2 ist fertig, es hat das entfernt “f2 (); "" aus dem Stapel und kehrt zurück zu F1 Um den verbleibenden Teil der auszuführen F1 Funktion
- Druckt die Zeile „Ende der Funktion F1“ und entfernt sie aus dem Stapel
- Da bleibt kein Befehl in F1 (), Der Zeiger entfernt es auch aus dem Stapel.
Da Sie nun wissen, wie der Ausführungsstapel funktioniert, können Sie zum Async -Code -Beispiel übergehen, indem Sie die folgenden Codezeilen testen:
Funktion f2 ()Konsole.log ("Inside -Funktion f2");
setTimeout (() =>
Konsole.log ("f2 ist fertig");
, 3000);
Funktion f1 ()
Konsole.log ("Inside -Funktion F1");
f2 ();
Konsole.log ("Ende der Funktion f1");
F1 ();
Wie Sie sehen können, in der Funktion f2 () Wir machen jetzt eine Aufgabe, die 3 Sekunden dauert, um fertig zu werden. Wenn der Zeiger dies erreicht setTimeout () Anweisung, es platziert es in die Web -APIs -Umgebung und entfernt sie aus dem Ausführungsstapel.
Der Ausführungsstapel arbeitet weiter am anderen Teil des Codes, während die Web -API auf die wartet setTimeout () zu beenden wie:
Danach setTimeout () Der Befehl wurde in die Web -API -Umgebung verschoben. Der Ausführungsstapel sieht so aus:
Wie Sie sehen können, arbeitet der Ausführungsstapel, während die Web -API an der SetTimeout -Funktion arbeitet, an anderen Anweisungen und entzieht sie aus dem Stapel aus. Wenn die Web -API beendet ist, arbeiten Sie an der “setTimeout ()”Es wird es in die Ereigniswarteschlange verschieben, während die Ereignisschleifen darauf warten, dass der Ausführungsstapel leer wird.
Wenn der Stapel leer ist, bewegt die Ereignisschleife die setTimeout Ergebnis zum Ausführungsstapel als:
Und dann:
So funktioniert die Ereignisschleife. Aus diesem Grund erhalten Sie die folgende Ausgabe auf Ihrer Konsole:
Mit der obigen Ausgabe können Sie die Ausführung der Ereignisschleife überprüfen
Abschluss
Der Ereignisschleife ist eine Funktion, die die Anweisungen bewegt, die darauf warten, aus der Ereigniswarteschlange in den globalen Ausführungsstapel ausgeführt zu werden. Wann immer eine Funktion mag setTimeout () muss gleichzeitig ausgeführt werden, es wird vom Ausführungsstapel in die Web -API -Umgebung verschoben. Die Web -API arbeitet an der Anweisung, während das JavaScript weiterhin andere Teile des Codes ausführt. Sobald die Web -API an der Anweisung gearbeitet hat, wird die Anweisung oder Funktion in der Ereigniswarteschlange angegeben, an der sie in den Ausführungsstapel verschoben wird, wann immer der Stack ist leer. Das ganze Zyklus ist als die bekannt Ereignisschleife.