JS事件循環(huán)，了解一下

xbynet 發(fā)布于2019-08-26 11:59 / 2593人閱讀

摘要：任務(wù)隊列中的代碼被加載到函數(shù)調(diào)用棧中去執(zhí)行。說到這里，你基本上對事件循環(huán)有個大致的了解了。

在理解事件循環(huán)之前，我總會遇到一些奇奇怪怪的問題：比如明明已經(jīng)調(diào)接口拿到了數(shù)據(jù)，可是跟在調(diào)數(shù)據(jù)之后的操作卻沒有正常執(zhí)行；又或者不知道為啥，代碼里非得加個setTimeout才能正常跑通；特別是在運(yùn)用Promise的時候，更是有各種問題百思不得解。遇上問題要解決，更要知道問題產(chǎn)生的原因，這樣才能hold住全場！

廢話不多說了，先來看一段代碼

console.log("start");

setTimeout(function(){
   console.log("setTImeout1") 
},0);

new Promise(function(resolve,reject){
    console.log("resolve")
    setTimeout(function(){
        console.log("setTimeout2")
    },200);
    resolve()
}).then(function(){
    console.log("then")
});

setTimeout(function(){
    console.log("setTimeout3")
},0);

console.log("end");

結(jié)果是start resolve end then setTimeout1 setTimeout3 settimeout2。

在分析結(jié)果之前，我先來科普幾個概念，這些概念的表述不一定與標(biāo)準(zhǔn)完全對應(yīng)，但是可以幫助你更容易理解JS的事件機(jī)制

宏任務(wù)（macro-task）：包括js整體代碼，setTimeout，setInterval，setImmediate ，I/O, UI renderder等

微任務(wù)（micro-task）：包括Promise，Object.observe，process.nextTick，MutationObserver等

調(diào)用棧：js被加載進(jìn)來之后，會從上至下讀取代碼，同步代碼被立即執(zhí)行，而異步代碼被加入事件隊列中

事件隊列：一些沒有被立即執(zhí)行的代碼被添加到事件隊列中，隊列是一種先進(jìn)先出的數(shù)據(jù)結(jié)構(gòu)，也就是說，先加入事件隊列的任務(wù)會被優(yōu)先執(zhí)行

我們知道，js是單線程的，這就是說，只有一個主線程，主線程會自上而下依次執(zhí)行調(diào)用棧中的事件。任務(wù)隊列中的代碼被加載到函數(shù)調(diào)用棧中去執(zhí)行。當(dāng)前的宏任務(wù)隊列中的代碼執(zhí)行完畢后，會執(zhí)行本次宏任務(wù)隊列中分發(fā)到微任務(wù)隊列中的代碼。然后執(zhí)行下一個宏任務(wù)隊列中的代碼，依次循環(huán)。

這里要提一點(diǎn)容易誤解的地方，setTimeout函數(shù)本身，其實(shí)是立即執(zhí)行的，它內(nèi)部的任務(wù)，才會被分發(fā)到任務(wù)隊列中延時執(zhí)行。

代碼被加載后，全局上下文進(jìn)入函數(shù)調(diào)用棧，緊接著，‘start’被執(zhí)行

遇到setTimeout的時候，新建了一個宏任務(wù)隊列，函數(shù)內(nèi)的任務(wù)被分發(fā)這個隊列中等待執(zhí)行

此時遇到了Promise，注意，Promise中的第一個function中的代碼會立馬開始執(zhí)行，遇到resolve或者reject后，then方法中函數(shù)會被分發(fā)到本次事件循環(huán)的微任務(wù)隊列中等待執(zhí)行。所以這里立馬打印出了"resolve"。遇到setTimeout2后，同樣新建了一個宏任務(wù)隊列，其中的函數(shù)被分發(fā)到了這個新的宏任務(wù)隊列中，then方法中的操作被分發(fā)到了微任務(wù)隊列中等待

代碼繼續(xù)往下，遇到"setTimeout3"后再次新建了一個新的宏任務(wù)隊列

"end"被立即執(zhí)行。此時有三個宏任務(wù)隊列，一個微任務(wù)隊列

微任務(wù)隊列中的操作被執(zhí)行，也就是打印出了‘then’，此時，第一輪的事件循環(huán)結(jié)束。

第一輪的事件循環(huán)結(jié)束，開始下一輪的事件循環(huán)，依次執(zhí)行每個宏任務(wù)隊列中的內(nèi)容，我們這里宏任務(wù)隊列中的函數(shù)比較簡單，都是console操作，所以并沒有再分發(fā)新的任務(wù)隊列，但是由于第二個setTimeout設(shè)定了200毫秒的延時，所以‘setTimeout2’被最后打印。

說到這里，你基本上對事件循環(huán)有個大致的了解了。之前有個同學(xué)問過我一個問題，點(diǎn)擊輪播圖下一頁，但是頁面沒有反應(yīng)，代碼是這樣的：

這個函數(shù)是點(diǎn)擊下一頁的按鈕后輪播圖轉(zhuǎn)動，他在getNextPhoto函數(shù)中調(diào)接口獲取了下個頁面的數(shù)據(jù)，goToPage函數(shù)里是讓輪播圖切換的操作。相信如果你讀懂了這篇文章，就會知道問題出在了哪里。顯然獲取數(shù)據(jù)ajax是個異步操作，他被分發(fā)到了事件隊列中等待執(zhí)行，所以還沒等數(shù)據(jù)回來，翻頁的操作已經(jīng)開始執(zhí)行，由于沒有數(shù)據(jù)，并沒有按預(yù)期效果顯示。解決方法就是在getNextPhoto函數(shù)里調(diào)接口拿到數(shù)據(jù)之后，再通知去執(zhí)行goToPage操作，問題就解決了。

作為一個前端菜鳥，希望得到各位大神的批評指正！