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

了解 event loop，我們先了解以下3點

①js 是單線程

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

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

我們來看個圖

當檢測到是同步任務時，該任務會直接移到調(diào)用棧里面再傳給瀏覽器

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

當檢測到是異步任務時，該任務會被放置到 webAPI 中即等待隊列，當同步任務執(zhí)行完，調(diào)用棧為空的時候，且該異步任務執(zhí)行時機到了的時候，異步任務會被移到到回調(diào)隊列

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

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

這樣說可能有點抽象，我們直接上例子

這個我們都知道輸出答案為 a,c,b 具體我們來看看

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

然后到定時器，這是個異步任務

先放在等待隊列 WebAPI

當滿足以下3個條件，異步任務轉(zhuǎn)移到回調(diào)隊列

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

②調(diào)用棧清空

③異步任務到達時機可執(zhí)行

當異步任務定時器3s到的時候即到時機執(zhí)行，異步任務轉(zhuǎn)移到回調(diào)隊列

同步任務執(zhí)行完后，event loop 開始運作，去回調(diào)隊列找事件任務，找到后將其轉(zhuǎn)移到調(diào)用棧

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