Eingehende Analyse des Ereignisausführungsmechanismus in JS

Dieser Artikel vermittelt Ihnen ein tiefgreifendes Verständnis des Ereignisausführungsmechanismus in JavaScript, indem er die Drucksequenz eines Codeabschnitts analysiert. Ich hoffe, er wird Ihnen hilfreich sein!

Ich war vor einiger Zeit etwas verwirrt über eine schriftliche Testfrage. Heute werden wir den Ereignisausführungsmechanismus von JS gründlich analysieren. [Verwandte Empfehlungen: Javascript-Lern-Tutorial]

Schauen Sie sich zuerst einen Code an

Freunde können versuchen, die Druckreihenfolge aufzuschreiben

Einzelner Thread

JS Als Browser-Skriptsprache besteht der Hauptzweck von Js darin, das DOM zu betreiben, das festlegt, dass JS Single-Threaded sein muss. Code> ist wie Java. Es ist auch multithreaded. Wenn zwei Threads das DOM gleichzeitig betreiben, wie sollte der Browser dies ausführen? JS主要作为浏览器的脚本语言，Js的主要用途是操作DOM，这就决定了JS必须是单线程，如果JS如Java一样是多线程，如果两个线程同时操作DOM，那么浏览器应该怎么执行呢？

JS的发布其实是为了蹭Java的热度，其中编写这门语言的时间并不久，所以这也就是为什么JS是单线程的原因

JS执行机制

JS既然是单线程，那么必然会对任务进行一个排序。所有的任务都将按照一个规则执行下去。

• 同步任务

• 异步任务

同步任务和异步任务进入执行栈中，JS会先判断任务的类型

• 是同步任务，直接进入主线程

• 是异步任务，进入Event Table中，注册回调函数Event Queue

• 同步任务全部执行结束，JS会Event Queue中读取函数执行

• 这个过程会反复执行，直到全部任务执行结束。这就是我们常说的事件循环

JS如何判断执行栈为空

emmmm，我不知道。。。。JS应该有一套自己独有的逻辑去判断执行栈是否为空。

异步任务

异步的任务执行顺序为：宏任务——>微任务

异步任务可分为

• 宏任务

• 微任务

常见的宏任务

• I/0

• setTimeout

• setInterval

常见的微任务

• Promise

• .then

• .catch

答案

vite 之前配置的一个插件，版本有些问题，不要管这个红色报警

分析

• 开始了 是一个同步任务，最先进入执行栈中

• 执行task()函数， a是一个同步任务，进入执行栈中

• async/await 是异步转同步的过程，第一行代码会同步执行，以下的代码会异步。b作为一个同步任务进入执行栈中

• a end成为了异步任务的微任务，进入执行栈中，

目前为止，同步任务队列依次是 开始了, a, b

目前为止，异步任务队列依次是 宏任务: setTimeout 微任务：a end

如果没有后续代码，打印顺序如下

那么问题来了，不是说宏任务会比微任务提前执行吗，为什么setTimeout打印在a end之后呢？

看这张图

setTimeout 作为了宏任务进入了任务队列。所以造成了这种原因

通俗来讲：

async await 导致了微任务的产生，但是这个微任务所属于当前的宏任务。所以会先执行a end，执行完毕判断当前宏任务结束。执行下一个宏任务，打印出了setTimeout

继续走流程

• c 由于Promise的转化，变为同步任务进入到任务队列中

• c end 作为Promise衍生的微任务进入任务队列

• d

  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 Single-Threaded🎜

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

  • 🎜Synchrone Aufgaben🎜
  • 🎜Asynchrone Aufgaben🎜

  🎜🎜🎜Synchronisierte Aufgaben und asynchrone Aufgaben werden in den Ausführungsstapel eingegeben. JS bestimmt zunächst den Typ der Aufgabe🎜

  🎜 ist eine synchrone Aufgabe und geht direkt in den Hauptthread ein🎜

• 🎜 ist eine asynchrone Aufgabe. Geben Sie die Ereignistabelle ein und registrieren Sie die Rückruffunktion Ereigniswarteschlange 🎜
• 🎜Nachdem alle Synchronisierungsaufgaben ausgeführt wurden, liest JS die Funktion aus der Ereigniswarteschlange und führt sie aus🎜
• 🎜Dieser Prozess wird wiederholt ausgeführt werden, bis alle Aufgaben ausgeführt sind. Das nennen wir oft Ereignisschleife🎜

🎜Wie stellt JS fest, dass der Ausführungsstapel leer ist🎜 h4>🎜 emmmm, ich weiß es nicht. . . . JS sollte über eine eigene eindeutige Logik verfügen, um festzustellen, ob der Ausführungsstapel leer ist. 🎜

🎜Asynchrone Aufgaben🎜🎜🎜Die Reihenfolge der asynchronen Aufgabenausführung ist: Makroaufgaben -> Mikroaufgaben 🎜🎜Asynchrone Aufgaben können in 🎜

• 🎜 Makroaufgaben unterteilt werden 🎜
• 🎜Mikroaufgaben🎜

🎜Gemeinsame Makroaufgaben🎜

• 🎜 I/ 0🎜
• 🎜setTimeout🎜
• 🎜setInterval🎜

🎜Gemeinsame Mikrotasks🎜

• 🎜Promise🎜
• 🎜.then🎜
• 🎜.catch🎜

Antworten🎜🎜vite Es ist bereits ein Plug-in konfiguriert. Es gibt einige Probleme mit der Version. Ignorieren Sie diesen roten Alarm.🎜

Analyse🎜

• 🎜Gestartet ist eine synchrone Aufgabe und betritt als erste den Ausführungsstapel 🎜
• 🎜 führt die Funktion a aus synchrone Aufgabe und tritt in die Ausführung ein. 🎜
• 🎜async/await im Stapel ist der Prozess der asynchronen bis synchronen Ausführung. b tritt als synchrone Aufgabe in den Ausführungsstapel ein 🎜
• 🎜a end wird zu einer Mikrotask der asynchronen Aufgabe und tritt in den Ausführungsstapel ein, 🎜 li>

🎜🎜Bisher ist die Synchronisierungsaufgabenwarteschlange Gestartet, a, b🎜🎜🎜🎜Bisher ist The Die asynchrone Aufgabenwarteschlange ist wiederum eine Makroaufgabe: setTimeout Mikroaufgabe: a end🎜🎜

🎜Wenn kein nachfolgender Code vorhanden ist , die Drucksequenz wie folgt🎜🎜🎜🎜 🎜Dann stellt sich die Frage: Bedeutet das nicht, dass Makroaufgaben früher ausgeführt werden als Mikroaufgaben? Warum wird setTimeout nach a end gedruckt? 🎜🎜Sehen Sie sich dieses Bild an🎜🎜🎜🎜setTimeout wird als Makroaufgabe in die Aufgabenwarteschlange eingetragen. Der Grund ist also 🎜🎜Um es für den Laien auszudrücken: 🎜🎜asynchrones Warten führt zur Generierung von Mikroaufgaben, aber diese Mikroaufgabe gehört zur aktuellen Makroaufgabe. Daher wird a end zuerst ausgeführt und dann wird die aktuelle Makroaufgabe als abgeschlossen beurteilt. Führen Sie die nächste Makroaufgabe aus und drucken Sie setTimeout🎜

🎜Verfolgen Sie den Vorgang weiter🎜

• 🎜 c Durch die Konvertierung von Promise wird es zu einer synchronen Aufgabe und gelangt in die Aufgabenwarteschlange🎜
• 🎜c end Tritt als abgeleitete Mikroaufgabe in die Aufgabenwarteschlange ein von Promise🎜
• 🎜d gelangt als Synchronisierungsaufgabe in die Aufgabenwarteschlange🎜

Bisher synchrone Aufgabenwarteschlange

• a

• b

• c

• d

Bisher asynchron ous-Aufgabenwarteschlange

• a end micro Aufgabe: c Ende der Mikroaufgabe: Makroaufgabe setTimeout alle Der Chef wies darauf hin.

【Empfohlene verwandte Video-Tutorials:
• Web-Frontend

  】

Das obige ist der detaillierte Inhalt vonEingehende Analyse des Ereignisausführungsmechanismus in JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!