Vertiefendes Verständnis des JS-Ereignisschleifenmechanismus

Der Inhalt dieses Artikels soll Ihnen ein tiefgreifendes Verständnis des JS-Ereignisschleifenmechanismus vermitteln. Er hat einen gewissen Referenzwert 🎜>

Vorher geschrieben

Der Ereignisschleifenmechanismus in js ist sehr interessant. Aus vielen Interviewfragen geht auch hervor, dass die Untersuchung des einfachen setTimeout darin besteht, diesen Mechanismus zu untersuchen.

Vorher dachte ich einfach, dass die Funktion nicht sofort ausgegeben wird, da sie sehr schnell ausgeführt wird, selbst wenn die setTimeout-Ausführungszeit 0 ist, sondern vor der Ausgabe auf die Ausführung der Funktion wartet. Das ist nur die halbe Wahrheit.
Tatsächlich ist sein Betriebsmechanismus der Ereignisschleifenmechanismus in js. In diesem Schleifenmechanismus hängt er mit dem Aufrufstapel und der Aufgabenwarteschlange zusammen.

js-Ereignisschleifenmechanismus

Der Ereignisschleifenmechanismus besteht, vereinfacht ausgedrückt, darin, Funktionen während des Ausführungskontexts in den Stapel zu verschieben und dort abzulegen. Die Funktion wird vor der Ausführung auf den Stapel gelegt und nach der Ausführung wieder ausgegeben. Wenn Sie auf asynchrone Vorgänge wie Rückruffunktionen, Ajax, SetTimeout usw. stoßen, werden diese zur Ausführung an andere Module des Browsers übergeben. Nach der Ausführung werden die Rückruffunktionen in die Taskwarteschlange gestellt. Wenn alle Aufrufstapel ausgeführt sind, werden die Funktionen in der Aufgabenwarteschlange ausgeführt.

Geben Sie ein einfaches Beispiel:

console.log(1);
setTimeout(function(){console.log(2);}, 0);console.log(3);

Lassen Sie uns einen Blick auf den internen Ausführungsprozess werfen

1 Führen Sie den ersten Satz aus, fügen Sie ihn in den Aufrufstapel ein und geben Sie 1 aus

2. Der erste Satz wird vom Stapel genommen und der zweite Satz wird ausgeführt. Da er asynchron ausgeführt wird, wird er an andere Module übergeben.

3. Fügen Sie nach der Ausführung die
Rückruffunktion in die Taskwarteschlange ein
Führen Sie den nächsten Satz aus, genau wie im ersten Schritt. put Die Anweisung wird auf den Stapel gelegt und ausgeführt, und 3

5 wird ausgegeben. Die Anweisung wird vom Stapel entfernt und der Aufrufstapel ist zu diesem Zeitpunkt leer. Beginnen Sie mit der Ausführung der Aufgabenwarteschlangenaufgabe und geben Sie 2

aus. Daher ist das Ausgabeergebnis

wie erwartet.

Erweitert

Wie funktioniert es, wenn Promise hinzugefügt wird?

Wir wissen, dass die Rückruffunktion von Promise nicht übergeben wird, sondern mit then aufgerufen wird. Daher sollte die in Promise definierte Funktion sofort ausgeführt werden und dann ihre Rückruffunktion in die Warteschlange gestellt werden.
Ein wichtiges Konzept wird auch in dem Artikel erwähnt, auf den verwiesen wird:

MakroaufgabeEnthält: Skript (Gesamtcode), setTimeout, setInterval, setImmediate, I/O, UI-Rendering.
Mikroaufgabe umfasst: Process.nextTick, Promises, Object.observe, MutationObserver Ausführungssequenz: Der Funktionsaufrufstapel wird gelöscht, sodass nur der globale Ausführungskontext übrig bleibt, und dann werden alle Mikroaufgaben ausgeführt. Nachdem alle ausführbaren Mikroaufgaben ausgeführt wurden. Die Schleife führt erneut eine Aufgabenwarteschlange in der Makroaufgabe aus und führt dann nach der Ausführung alle Mikroaufgaben aus, und die Schleife wird so fortgesetzt.

Schauen Sie sich ein weiteres Beispiel an:

(function test() {
    setTimeout(function() {console.log(4)}, 0);
    new Promise(function executor(resolve) {
        console.log(1);
        for( var i=0 ; i<10000 ; i++ ) {
            i == 9999 && resolve();
        }
        console.log(2);
    }).then(function() {
        console.log(5);
    });
    console.log(3);})()

Für den konkreten Prozess können Sie den Artikel oben lesen. Der ungefähre Prozess ist wie folgt:

1. Wenn setTimeout auftritt, wird es zur Ausführung an andere Module übergeben. Nach der Ausführung wird der Rückruf in die Makroaufgabe eingefügt. Die darin enthaltene Funktion wird sofort ausgeführt und 1 ausgegeben.
3. Die Schleife startet, trifft auf „resolve()“ und ändert den Promise-Status in „erfüllen“. Fortsetzung der Ausführung und Ausgabe 2.
4. Wenn Sie darauf stoßen, fügen Sie den Rückruf in eine Mikroaufgabe ein.
5. Fortsetzung der Ausführung und Ausgabe 3.
6. Die Ausführung des Aufrufstapels ist abgeschlossen. Beginnen Sie mit der Ausführung der Rückruffunktion in der Mikroaufgabe und geben Sie 5 aus.
7. Nachdem die Mikroaufgabe ausgeführt wurde, wird die Rückruffunktion in der Makroaufgabe ausgeführt und 4 wird ausgegeben.
8. Das Ende.

Das obige ist der detaillierte Inhalt vonVertiefendes Verständnis des JS-Ereignisschleifenmechanismus. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!