js事件循環(huán)

elarity 發(fā)布于2019-08-23 18:39 / 2450人閱讀

摘要：每一個程序都擁有唯一的事件循環(huán)，大多數(shù)代碼的執(zhí)行順序是可以根據(jù)函數(shù)調(diào)用棧的規(guī)則執(zhí)行的，而或者不同的事件綁定等中的代碼，則通過隊(duì)列來執(zhí)行。當(dāng)所有可執(zhí)行的執(zhí)行完畢之后，就表示第一次事件循環(huán)結(jié)束第二次循環(huán)會再次從開始執(zhí)行。

console.log("begin");
setTimeout(function() { console.log("timeout") });
new Promise(function(resolve) {
    for (let i = 0; i < 3; i++) {
        if (i == 1) resolve();
        console.log(i);
    }
    console.log("promise")
}).then(function() {
    console.log("then")
})
console.log("end");

上述代碼依次輸出：begin、0、1、2、promise、end、then、timeout

js的一個特點(diǎn)就是單線程，但是很多時候我們?nèi)匀恍枰诓煌臅r間去執(zhí)行不同的任務(wù)，例如給元素添加點(diǎn)擊事件，設(shè)置一個定時器，或者發(fā)起ajax請求，因此需要一個異步機(jī)制來達(dá)到這樣的目的，事件循環(huán)機(jī)制也因此而來。

每一個js程序都擁有唯一的事件循環(huán)，大多數(shù)代碼的執(zhí)行順序是可以根據(jù)函數(shù)調(diào)用棧的規(guī)則執(zhí)行的，而setTimeout/setInterval或者不同的事件綁定（click、mousedown等）中的代碼，則通過隊(duì)列來執(zhí)行。

任務(wù)隊(duì)列又分為宏任務(wù)（macro-task）與微任務(wù)（micro-task）兩種，在瀏覽器中，包括：

macro-task：script（整體代碼）、setTimeout/setInterval、I/O、UI rendering等

micro-task：Promise、MutationObserver

事件循環(huán)的順序，決定了js代碼的執(zhí)行順序：
首先從macro-task中的script開始第一次循環(huán)。此時全局上下文進(jìn)入函數(shù)調(diào)用棧，直到調(diào)用棧清空，在這個過程中，如果遇到任務(wù)分發(fā)器（例如timer、promise），就會將任務(wù)放入對應(yīng)隊(duì)列中去

第一次循環(huán)時，macro-task中其實(shí)只有script，因此函數(shù)調(diào)用棧清空之后，會直接執(zhí)行所有的micro-task。當(dāng)所有可執(zhí)行的micro-task執(zhí)行完畢之后，就表示第一次事件循環(huán)結(jié)束

第二次循環(huán)會再次從macro-task開始執(zhí)行。此時macro-task中的script隊(duì)列已經(jīng)沒有任務(wù)了，但是可能會有其他的隊(duì)列任務(wù)，而micro-task中暫時還沒有任務(wù)。此時會先選擇其中一個宏任務(wù)隊(duì)列，例如setTimeout，將該隊(duì)列中所有的任務(wù)全部執(zhí)行完畢，然后再執(zhí)行此過程中可能產(chǎn)生的微任務(wù)。微任務(wù)執(zhí)行完畢之后，再回過頭來執(zhí)行其他宏任務(wù)隊(duì)列中的任務(wù)。以此類推，直到所有宏任務(wù)隊(duì)列中的任務(wù)都被執(zhí)行了，并且清空了微任務(wù)，第二次循環(huán)就會結(jié)束

如果在第二次循環(huán)過程中，產(chǎn)生了新的宏任務(wù)隊(duì)列，或者之前宏任務(wù)隊(duì)列中的任務(wù)暫時沒有滿足執(zhí)行條件，例如延遲時間不夠或者事件沒有被觸發(fā)，那么將會繼續(xù)以同樣的順序重復(fù)循環(huán)