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

本篇文章透過分析一段程式碼的列印順序，帶大家深入了解javascript中的事件執行機制，希望對大家有幫助！

前段時間一道筆試題，有點迷糊。今天徹底分析下JS的事件執行機制。 【相關推薦：javascript學習教學】

先看一段程式碼

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

單一執行緒

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中文網其他相關文章！