App下載

event loop的事件循環(huán)

猿友 2021-02-23 15:58:21 瀏覽數(shù) (5729)
反饋

了解 event loop,我們先了解以下3點(diǎn)

①js 是單線程

②異步基于回調(diào)實(shí)現(xiàn)

③event loop 是異步回調(diào)的實(shí)現(xiàn)原理

我們來(lái)看個(gè)圖

微信截圖_20210223103319

當(dāng)檢測(cè)到是同步任務(wù)時(shí),該任務(wù)會(huì)直接移到調(diào)用棧里面再傳給瀏覽器

調(diào)用棧-瀏覽器

當(dāng)檢測(cè)到是異步任務(wù)時(shí),該任務(wù)會(huì)被放置到 webAPI 中即等待隊(duì)列,當(dāng)同步任務(wù)執(zhí)行完,調(diào)用棧為空的時(shí)候,且該異步任務(wù)執(zhí)行時(shí)機(jī)到了的時(shí)候,異步任務(wù)會(huì)被移到到回調(diào)隊(duì)列

這時(shí)候 event loop 就會(huì)去回調(diào)隊(duì)列找,如果回調(diào)隊(duì)列有事件,event loop 會(huì)獲取他并把他轉(zhuǎn)移到調(diào)用棧再轉(zhuǎn)移到瀏覽器

等待隊(duì)列-同步任務(wù)執(zhí)行完畢,調(diào)用棧為空,異步任務(wù)執(zhí)行時(shí)機(jī)到了-回調(diào)隊(duì)列-event loop 獲取-調(diào)用棧-瀏覽器

 

這樣說(shuō)可能有點(diǎn)抽象,我們直接上例子

20210222163557324

這個(gè)我們都知道輸出答案為 a,c,b 具體我們來(lái)看看

從上往下執(zhí)行先是 console.log('a'),該任務(wù)為同步任務(wù),所以直接放置調(diào)用棧,再輸出到瀏覽器,調(diào)用棧再清空

微信截圖_20210223103343

然后到定時(shí)器,這是個(gè)異步任務(wù)

先放在等待隊(duì)列 WebAPI

微信截圖_20210223103612

當(dāng)滿足以下3個(gè)條件,異步任務(wù)轉(zhuǎn)移到回調(diào)隊(duì)列

①同步任務(wù)執(zhí)行完畢

②調(diào)用棧清空

③異步任務(wù)到達(dá)時(shí)機(jī)可執(zhí)行

當(dāng)異步任務(wù)定時(shí)器3s到的時(shí)候即到時(shí)機(jī)執(zhí)行,異步任務(wù)轉(zhuǎn)移到回調(diào)隊(duì)列

微信截圖_20210223103634

同步任務(wù)執(zhí)行完后,event loop 開(kāi)始運(yùn)作,去回調(diào)隊(duì)列找事件任務(wù),找到后將其轉(zhuǎn)移到調(diào)用棧

微信截圖_20210223103646

最后再將其傳到瀏覽器,這就是 event loop 實(shí)現(xiàn)機(jī)制,也印證了上面的那句話,異步回調(diào)的原理是 event loop


0 人點(diǎn)贊