1. 首頁 > 生活百科 > >

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

小知識it知識

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

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

文章插圖

前段時間一道筆試題 ， 有點迷糊 。 今天徹底分析下JS的事件執行機制 。 【相關推薦：javascript學習教程】
先看一段代碼各位小伙伴可以試著寫出打印順序
深入分析下JS中的事件執行機制

文章插圖

單線程JS主要作為瀏覽器的腳本語言 ， Js的主要用途是操作DOM ， 這就決定了JS必須是單線程 ， 如果JS如Java一樣是多線程 ， 如果兩個線程同時操作DOM ， 那么瀏覽器應該怎么執行呢？
JS的發布其實是為了蹭Java的熱度 ， 其中編寫這門語言的時間并不久 ， 所以這也就是為什么JS是單線程的原因
JS執行機制JS既然是單線程 ， 那么必然會對任務進行一個排序 。 所有的任務都將按照一個規則執行下去 。
    同步任務
    異步任務
【深入分析下JS中的事件執行機制】
深入分析下JS中的事件執行機制

文章插圖

同步任務和異步任務進入執行棧中 ， JS會先判斷任務的類型
    是同步任務 ， 直接進入主線程
    是異步任務 ， 進入Event Table中 ， 注冊回調函數Event Queue
    同步任務全部執行結束 ， JS會Event Queue中讀取函數執行
    這個過程會反復執行 ， 直到全部任務執行結束 。 這就是我們常說的事件循環
JS如何判斷執行棧為空emmmm ， 我不知道 。 。 。 。 JS應該有一套自己獨有的邏輯去判斷執行棧是否為空 。
異步任務異步的任務執行順序為：宏任務——>微任務
異步任務可分為
    宏任務
    微任務
常見的宏任務
    I/0
    setTimeout
    setInterval
常見的微任務
    Promise
    .then
    .catch
答案vite 之前配置的一個插件 ， 版本有些問題 ， 不要管這個紅色報警
深入分析下JS中的事件執行機制

文章插圖

分析
    開始了 是一個同步任務 ， 最先進入執行棧中
    執行task()函數 ， a是一個同步任務 ， 進入執行棧中
    async/await 是異步轉同步的過程 ， 第一行代碼會同步執行 ， 以下的代碼會異步 。 b作為一個同步任務進入執行棧中
    a end成為了異步任務的微任務 ， 進入執行棧中 ，
目前為止 ， 同步任務隊列依次是 開始了, a, b
目前為止 ， 異步任務隊列依次是 宏任務: setTimeout 微任務：a end
如果沒有后續代碼 ， 打印順序如下
深入分析下JS中的事件執行機制

文章插圖

那么問題來了 ， 不是說宏任務會比微任務提前執行嗎 ， 為什么setTimeout打印在a end之后呢？
看這張圖
深入分析下JS中的事件執行機制

文章插圖

setTimeout 作為了宏任務進入了任務隊列 。 所以造成了這種原因
通俗來講：
async await 導致了微任務的產生 ， 但是這個微任務所屬于當前的宏任務 。 所以會先執行a end ， 執行完畢判斷當前宏任務結束 。 執行下一個宏任務 ， 打印出了setTimeout
繼續走流程
    c 由于Promise的轉化 ， 變為同步任務進入到任務隊列中
    c end 作為Promise衍生的微任務進入任務隊列
    d 作為同步任務進入任務隊列
目前為止 ， 同步任務隊列
    a
    b
    c
    d
目前為止 ， 異步任務隊列
    a end 微任務
    c end 微任務
    setTimeout 宏任務
所以打印順序如下
深入分析下JS中的事件執行機制

文章插圖

后記自己對JS執行機制的理解 ， 可能會有些不正確的地方 ， 希望各位大佬指出 。
【相關視頻教程推薦：web前端】
以上就是深入分析下JS中的事件執行機制的詳細內容 ， 更多請關注電腦自學網其它相關文章！

推薦閱讀