小編給大家分享一下javascript中事件執(zhí)行機(jī)制的示例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

創(chuàng)新互聯(lián)是專業(yè)的改則網(wǎng)站建設(shè)公司，改則接單;提供網(wǎng)站建設(shè)、成都網(wǎng)站建設(shè),網(wǎng)頁設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行改則網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來合作!

先看一段代碼

各位小伙伴可以試著寫出打印順序

單線程

JS主要作為瀏覽器的腳本語言，Js的主要用途是操作DOM，這就決定了JS必須是單線程，如果JS如Java一樣是多線程，如果兩個(gè)線程同時(shí)操作DOM，那么瀏覽器應(yīng)該怎么執(zhí)行呢？

JS的發(fā)布其實(shí)是為了蹭Java的熱度，其中編寫這門語言的時(shí)間并不久，所以這也就是為什么JS是單線程的原因

JS執(zhí)行機(jī)制

JS既然是單線程，那么必然會(huì)對(duì)任務(wù)進(jìn)行一個(gè)排序。所有的任務(wù)都將按照一個(gè)規(guī)則執(zhí)行下去。

• 同步任務(wù)

• 異步任務(wù)

同步任務(wù)和異步任務(wù)進(jìn)入執(zhí)行棧中，JS會(huì)先判斷任務(wù)的類型

• 是同步任務(wù)，直接進(jìn)入主線程

• 是異步任務(wù)，進(jìn)入Event Table中，注冊(cè)回調(diào)函數(shù)Event Queue

• 同步任務(wù)全部執(zhí)行結(jié)束，JS會(huì)Event Queue中讀取函數(shù)執(zhí)行

• 這個(gè)過程會(huì)反復(fù)執(zhí)行，直到全部任務(wù)執(zhí)行結(jié)束。這就是我們常說的事件循環(huán)

JS如何判斷執(zhí)行棧為空

emmmm，我不知道。。。。JS應(yīng)該有一套自己獨(dú)有的邏輯去判斷執(zhí)行棧是否為空。

異步任務(wù)

異步的任務(wù)執(zhí)行順序?yàn)椋汉耆蝿?wù)——>微任務(wù)

異步任務(wù)可分為

• 宏任務(wù)

• 微任務(wù)

常見的宏任務(wù)

• I/0

• setTimeout

• setInterval

常見的微任務(wù)

• Promise

• .then

• .catch

答案

vite 之前配置的一個(gè)插件，版本有些問題，不要管這個(gè)紅色報(bào)警

分析

• 開始了 是一個(gè)同步任務(wù)，最先進(jìn)入執(zhí)行棧中

• 執(zhí)行task()函數(shù)， a是一個(gè)同步任務(wù)，進(jìn)入執(zhí)行棧中

• async/await 是異步轉(zhuǎn)同步的過程，第一行代碼會(huì)同步執(zhí)行，以下的代碼會(huì)異步。b作為一個(gè)同步任務(wù)進(jìn)入執(zhí)行棧中

• a end成為了異步任務(wù)的微任務(wù)，進(jìn)入執(zhí)行棧中，

目前為止，同步任務(wù)隊(duì)列依次是 開始了, a, b

目前為止，異步任務(wù)隊(duì)列依次是 宏任務(wù): setTimeout 微任務(wù)：a end

如果沒有后續(xù)代碼，打印順序如下

那么問題來了，不是說宏任務(wù)會(huì)比微任務(wù)提前執(zhí)行嗎，為什么setTimeout打印在a end之后呢？

看這張圖

setTimeout 作為了宏任務(wù)進(jìn)入了任務(wù)隊(duì)列。所以造成了這種原因

通俗來講：

async await 導(dǎo)致了微任務(wù)的產(chǎn)生，但是這個(gè)微任務(wù)所屬于當(dāng)前的宏任務(wù)。所以會(huì)先執(zhí)行a end，執(zhí)行完畢判斷當(dāng)前宏任務(wù)結(jié)束。執(zhí)行下一個(gè)宏任務(wù)，打印出了setTimeout

繼續(xù)走流程

• c 由于Promise的轉(zhuǎn)化，變?yōu)橥饺蝿?wù)進(jìn)入到任務(wù)隊(duì)列中

• c end 作為Promise衍生的微任務(wù)進(jìn)入任務(wù)隊(duì)列

• d 作為同步任務(wù)進(jìn)入任務(wù)隊(duì)列

目前為止，同步任務(wù)隊(duì)列

• a

• b

• c

• d

目前為止，異步任務(wù)隊(duì)列

• a end 微任務(wù)

• c end 微任務(wù)

• setTimeout 宏任務(wù)

所以打印順序如下

以上是“javascript中事件執(zhí)行機(jī)制的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！