Eingehende Analyse des Ereignisausführungsmechanismus in JS

So starten Sie schnell mit VUE3.0:

Ich war etwas verwirrt, als ich vor einiger Zeit mit dem Studium einer schriftlichen Testfrage begann. Heute werden wir den Ereignisausführungsmechanismus von JS gründlich analysieren.

Schauen wir uns zunächst einen Code an

. Freunde, Sie können versuchen, die Druckreihenfolge aufzuschreiben.

Single-Threaded

JS wird hauptsächlich als Skriptsprache des Browsers verwendet. Der Hauptzweck von Js besteht darin, das DOM zu betreiben, was bestimmt JS dass JS Single-Threaded sein muss, wie Java, und wenn zwei Threads ausgeführt werden gleichzeitig das DOM, dann sollte der Browser wie implementiert werden?

Die Veröffentlichung von JS soll eigentlich die Popularität von Java ausnutzen. Die Sprache wurde vor nicht allzu langer Zeit geschrieben, daher ist JS ein Single-Thread

-Ausführungsmechanismus

Da JS Single-Threaded ist, müssen Aufgaben sortiert werden. Alle Aufgaben werden nach einer Regel ausgeführt.

• Synchrone Aufgaben

• Asynchrone Aufgaben

Synchrone Aufgaben und asynchrone Aufgaben werden zunächst in den Ausführungsstapel eingegeben.

• Wenn sie direkt in den Hauptthread eintreten,

• wird Event Table eingegeben und die Event Queue registriert

• Nachdem alle synchronen Aufgaben ausgeführt wurden, tritt JS in Event Queue ein. Die Lesefunktion

führt diesen Vorgang wiederholt aus

• ,

• bis alle Aufgaben abgeschlossen sind. So sagen wir oft, dass die事件循环

JS feststellt, dass der Ausführungsstapel leer ist

, emmmmm, ich weiß es nicht. . . . JS sollte über eine eigene eindeutige Logik verfügen, um festzustellen, ob der Ausführungsstapel leer ist.

Asynchrone Aufgaben

Die Ausführungssequenz für asynchrone Aufgaben ist: Makroaufgaben -> Mikroaufgaben

• in

• Makroaufgaben

unterteilt werden

Allgemeine Makroaufgaben

• I/0

• setTimeout

• setInterval

Allgemeine Mikroaufgaben

• Promise

• .then

• .catch

Antwort

vite Ein zuvor konfiguriertes Plug-In. Es gibt ein Problem mit der Version. Bitte ignorieren Sie diesen roten Alarm.

Die Analyse

• 开始了mit der Eingabe einer synchronen Aufgabe in den Ausführungsstapel.

• task() a

• Codezeile wird asynchron ausgeführt Der folgende Code wird asynchron ausgeführt. b tritt als synchrone Aufgabe in den Ausführungsstapel ein,

• a end wird zur Mikroaufgabe der asynchronen Aufgabe und tritt in den Ausführungsstapel ein.

Bisher wurde die synchrone Aufgabenwarteschlange开始了, a , b

Bisher wurde die asynchrone Aufgabenwarteschlange gestartet Aufgaben: setTimeout Microtask: a end

Wenn kein nachfolgender Code vorhanden ist, ist die Druckreihenfolge wie folgt

Hier stellt sich also die Frage: Bedeutet das nicht, dass Makroaufgaben früher ausgeführt werden als Mikroaufgaben? Warum wird setTimeout nach a end ausgegeben?

看这张图

setTimeout wird als Makroaufgabe in die Aufgabenwarteschlange eingetragen. Der Grund dafür

ist im Allgemeinen:

Asynchrones Warten führt zur Generierung von Mikroaufgaben, aber diese Mikroaufgabe gehört zur aktuellen Makroaufgabe. Daher wird zuerst a end ausgeführt und nach der Ausführung beurteilt, dass die aktuelle Makroaufgabe beendet wurde. Führen Sie die nächste Makroaufgabe aus, drucken Sie setTimeout aus

und setzen Sie den Prozess

• c Durch die Konvertierung von Promise wird sie

• d

• c end Aufgabenwarteschlange eingegeben

• Die Aufgabenwarteschlange ist

bisher eine synchrone Aufgabe. Die Aufgabenwarteschlange ist

• a

• b

• c

• d.

Die asynchrone Aufgabenwarteschlange

• a endet mit der Mikroaufgabe

• c und endet mit der Makroaufgabe

• setTimeout.

Die Druckreihenfolge lautet also wie folgt

Nachtrag:

Mein Verständnis des JS-Ausführungsmechanismus ist möglicherweise etwas falsch, und ich hoffe, Sie können es darauf hinweisen.

[Empfohlene verwandte Video-Tutorials: Web-Frontend]

Das Obige ist eine detaillierte Analyse der Details des Ereignisausführungsmechanismus in JS. Weitere Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!