Das Prinzip des asynchronen Defekts des Ereignisschleifen-Ausführungsstapels (ausführliche Erklärung) (wesentlicher Beitrag)

Ereignisschleife

JSDie Betriebsumgebung wird als Hostumgebung bezeichnet.

JSDie Betriebsumgebung wird als Array-Umgebung bezeichnet. Warum sagen wir das, weil unser aktueller Front-End- JSCode auch der ESStandardcode ist? Er kann nicht nur im Browser, sondern auch auf dem Server ausgeführt werden, beispielsweise node.jsauch Auf der Client-Seite kann es auch auf der mobilen Seite ausgeführt werden, daher sollten wir das Stereotyp entfernen, das früher verwendet wurde. Es kann in verschiedenen Umgebungen ausgeführt werden. Solange Sie es mit einer relevanten jsAusführungs-Engine ausstatten , ist der ES6, den wir gelernt haben, tatsächlich Was ist in der Sprache selbst, weil es etwas in der Sprache selbst ist und das Original selbst in verschiedenen Umgebungen ausgeführt werden kann.

Die Schleifen und Urteile, die wir lernen, sind wie einige grundlegende Operationen von Arrays. Der Prototyp gehört zur ESUmgebung, dh die Sprache selbst soll Ihnen das Sprechen beibringen, und es gibt einige Unterschiede in dem, was er in der laufenden Umgebung gesagt hat, aber ihre Grundlage Es ist alles in dieser ESSprache und JSes ist wie in einer Umgebung, einer Browserumgebung, wir sind in einer Browserumgebung, wir nennen es Javascript.

jsSprache und ESSprache sind tatsächlich unterschiedlich, aber wir sagen normalerweise, dass sie an eine Sache gewöhnt sind, aber Sie müssen wissen, dass diese beiden tatsächlich zwei Dinge sind, JavaScripter ist eine Obermenge in ES,

Die Browserseite stellt ihnen eine Umgebung zur Verfügung. Diese Umgebung enthält nicht nur ESdie darin enthaltenen Spezifikationen, sondern auch einige neue Dinge, die als WebAPIDom-Operation, Bom-Operation, SetTimeout, Dom + Bom als WebAPI bezeichnet werden. Dies ist der Browser für ihn Die Syntax der neuen API wurde nicht geändert, daher wird sie als Array-Umgebung bezeichnet

Auf der Serverseite nennen wir ihn node.js, er verwendet auch eine ES-Sprache, und die Schleifenbeurteilung ist im Knoten genau gleich, außer dass einige Objekte und Methoden zum Knoten hinzugefügt wurden, die sogenannte Knoten-API, nur wir Sie müssen die neue Methode lernen.

Ausführungsstapel (Aufrufstapel)

Dies ist ein Speicherplatz. Verwenden wir diesen Speicherplatz als Stapel. Es ist ein bisschen wie ein Array. Es unterscheidet sich ein wenig von diesem Array. Wenn er Daten hinzufügt, fügt er sie immer am Ende des Stapels hinzu. Dies kann natürlich nicht sein Reine Daten können eine Funktion sein, es kann alles sein

Wenn er die Daten verbindet, dürfen sie nicht eingestreut werden. Sie müssen am Ende hinzugefügt werden. Dann nennen wir die zuletzt eingefügten Daten die Oberseite des Stapels und die ersten die Unterseite des Stapels. Wir nennen den Vorgang des Hinzufügens zum Stapel Die Daten im Stapel können nicht ewig dauern. Manchmal müssen wir die Daten wegwerfen, aber sie können nicht von der Mitte weggeworfen werden. Sie müssen der Reihe nach vom oberen Rand des Stapels entfernt werden. Wir nennen diesen Prozess Pop and Stack. Es heißt (push), in der Tat sehen Sie, dass dies das gleiche wie das Array ist.

Ausführungsstapel: Aufrufstapel, eine Datenstruktur, in der die Ausführungsumgebung verschiedener Funktionen gespeichert wird. Bevor jede Funktion ausgeführt wird, werden die zugehörigen Informationen zum Ausführungsstapel hinzugefügt. Erstellen Sie vor dem Funktionsaufruf eine Ausführungsumgebung und fügen Sie sie dem Ausführungsstapel hinzu. Zerstören Sie nach dem Funktionsaufruf die Ausführungsumgebung.

Die JS-Engine wird immer oben im Ausführungsstapel ausgeführt.

Asynchron

Asynchrone Funktionen: Einige Funktionen werden nicht sofort ausgeführt und erst nach Erreichen einer bestimmten Zeit. Eine solche Funktion wird als asynchrone Funktion bezeichnet. Wie z. B. Event-Handler-Funktion. Der Ausführungszeitpunkt von asynchronen Funktionen wird von der Hostumgebung gesteuert.

Die Browser-Host-Umgebung enthält 5 Threads:

1. JS-Engine: Verantwortlich für die Ausführung des obersten Codes des Ausführungsstapels
2. GUI-Thread: Verantwortlich für das Rendern von Seiten
3. Ereignisüberwachungsthread: Verantwortlich für die Überwachung verschiedener Ereignisse
4. Timing-Thread: verantwortlich für das Timing
5. Netzwerk-Thread: Verantwortlich für die Netzwerkkommunikation

Wenn im obigen Thread etwas passiert und der Thread feststellt, dass es einen Handler für dieses Ding gibt, fügt er den Handler einem Speicher hinzu, der als Ereigniswarteschlange bezeichnet wird. Wenn die JS-Engine feststellt, dass der Ausführungsstapel keinen weiteren Inhalt enthält, fügt sie dem Ausführungsstapel die erste Funktion in der Ereigniswarteschlange zur Ausführung hinzu.

Die Art und Weise, wie die JS-Engine die Ereigniswarteschlange abruft und mit der Hostumgebung zusammenarbeitet, wird als Ereignisschleife bezeichnet.

Ereigniswarteschlangen unterscheiden sich in verschiedenen Hostumgebungen, und die meisten Hostumgebungen unterteilen Ereigniswarteschlangen. Im Browser wird die Ereigniswarteschlange in zwei Typen unterteilt:

• Makroaufgaben (Warteschlangen): macroTask, die meisten asynchronen Funktionen wie Timer-End-Rückrufe, Ereignis-Rückrufe, http-Rückrufe usw. werden in die Makro-Warteschlange eingegeben
• Mikroaufgabe (Warteschlange): MutationObserver, der von Promise generierte Rückruf, tritt in die Mikrowarteschlange ein

Mit MutationObserver werden Änderungen in einem DOM-Objekt überwacht

Wenn der Ausführungsstapel geleert ist, führt die JS-Engine zuerst alle Aufgaben in der Mikroaufgabe nacheinander aus. Wenn keine Mikroaufgabe vorhanden ist, führt sie dann die Makroaufgabe aus.

Fehler von Ereignissen und Rückruffunktionen

Wir sind es gewohnt, herkömmliche Rückrufe oder Ereignisbehandlungen zu verwenden, um asynchrone Probleme zu lösen

Ereignis: Die Eigenschaft eines Objekts ist eine Funktion. Wenn etwas passiert, führen Sie die Funktion aus

	dom.onclick = function(){
	
	}

Rückruf: Wenn Sie eine Funktion ausführen, um eine Funktion zu erreichen, übergeben Sie eine Funktion als Parameter, und wenn etwas passiert, wird die Funktion ausgeführt.

	dom.addEventListener("click", function(){
	
	})

Im Wesentlichen gibt es keinen wesentlichen Unterschied zwischen Ereignissen und Rückrufen, sondern nur den Ort, an dem die Funktion platziert ist.

Das Modell hat die ganze Zeit gut funktioniert.

Bis das Front-End-Engineering immer komplexer wird ...

Derzeit ist das Modell hauptsächlich mit den folgenden zwei Problemen konfrontiert:

1. Rückruf-Hölle: Eine asynchrone Operation muss auf den Abschluss der vorherigen asynchronen Operation warten. Unabhängig davon, ob Rückrufe oder Ereignisse verwendet werden, wird sie kontinuierlich verschachtelt
2. Asynchrone Verbindung: Eine asynchrone Operation muss auf die Ergebnisse mehrerer asynchroner Operationen warten. Die Verarbeitung dieser Verbindung erhöht die Komplexität des Codes erheblich

Nehmen wir ein Beispiel

	 <p>
        <button id="btn1">按钮1：给按钮2注册点击事件</button>
        <button id="btn2">按钮2：给按钮3注册点击事件</button>
        <button id="btn3">按钮3：点击后弹出hello</button>
    </p>
    <script>
        const btn1 = document.getElementById("btn1"),
            btn2 = document.getElementById("btn2"),
            btn3 = document.getElementById("btn3");
        btn1.addEventListener("click", function() {
            //按钮1的其他事情
            btn2.addEventListener("click", function() {
                //按钮2的其他事情
                btn3.addEventListener("click", function() {
                    alert("hello");
                })
            })
        })
    </script>

In diesem Fall sind verschiedene Rückrufe und verschiedene Schleifen sehr mühsam, um eine Rückrufhölle zu bilden. Sehen Sie sich diese drei Ereignisse nicht an. Wenn es 100 ~ ist, ist das
oben Gesagte der gesamte Inhalt dieses Blogs. Kommentare sind willkommen. Nützlich