javascript中事件執行機制的示例分析

小編給大家分享一下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 宏任務

所以打印順序如下

以上是“javascript中事件執行機制的示例分析”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！