深入分析下JS中的事件執行機制

如何快速入門VUE3.0：進入學習

前段時間一道筆試題，有點迷糊。今天徹底分析下JS的事件執行機制。

先看一段程式碼

各位小夥伴可以試著寫出列印順序

單線程

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作為同步任務進入任務佇列

目前為止，同步任務佇列

• a

• b

• c

• d

目前為止，非同步任務佇列

• a end 微任務

• c end 微任務

• setTimeout 巨集任務

所以列印順序如下

後記

自己對JS執行機制的理解，可能會有些不正確的地方，希望各位大佬指出。

【相關影片教學推薦：web前端】

以上就是深入分析下JS中的事件執行機制的詳細內容，更多請關注php中文網其它相關文章！