了解 event loop,我們先了解以下3點
①js 是單線程
②異步基于回調(diào)實現(xiàn)
③event loop 是異步回調(diào)的實現(xiàn)原理
我們來看個圖
當(dāng)檢測到是同步任務(wù)時,該任務(wù)會直接移到調(diào)用棧里面再傳給瀏覽器
調(diào)用棧-瀏覽器
當(dāng)檢測到是異步任務(wù)時,該任務(wù)會被放置到 webAPI 中即等待隊列,當(dāng)同步任務(wù)執(zhí)行完,調(diào)用棧為空的時候,且該異步任務(wù)執(zhí)行時機到了的時候,異步任務(wù)會被移到到回調(diào)隊列
這時候 event loop 就會去回調(diào)隊列找,如果回調(diào)隊列有事件,event loop 會獲取他并把他轉(zhuǎn)移到調(diào)用棧再轉(zhuǎn)移到瀏覽器
等待隊列-同步任務(wù)執(zhí)行完畢,調(diào)用棧為空,異步任務(wù)執(zhí)行時機到了-回調(diào)隊列-event loop 獲取-調(diào)用棧-瀏覽器
這樣說可能有點抽象,我們直接上例子
這個我們都知道輸出答案為 a,c,b 具體我們來看看
從上往下執(zhí)行先是 console.log('a'),該任務(wù)為同步任務(wù),所以直接放置調(diào)用棧,再輸出到瀏覽器,調(diào)用棧再清空
然后到定時器,這是個異步任務(wù)
先放在等待隊列 WebAPI
當(dāng)滿足以下3個條件,異步任務(wù)轉(zhuǎn)移到回調(diào)隊列
①同步任務(wù)執(zhí)行完畢
②調(diào)用棧清空
③異步任務(wù)到達(dá)時機可執(zhí)行
當(dāng)異步任務(wù)定時器3s到的時候即到時機執(zhí)行,異步任務(wù)轉(zhuǎn)移到回調(diào)隊列
同步任務(wù)執(zhí)行完后,event loop 開始運作,去回調(diào)隊列找事件任務(wù),找到后將其轉(zhuǎn)移到調(diào)用棧
最后再將其傳到瀏覽器,這就是 event loop 實現(xiàn)機制,也印證了上面的那句話,異步回調(diào)的原理是 event loop