JS事件輪循機制、宏任務、微任務【實踐】

實踐理解

以下僅爲個人理解，僅供參考！

js事件輪循機制

• 1.js是單線程（主線程），所有js代碼都在主線程執行。
• 2.主線程的同步代碼執行完成後，就會讀取其它任務隊列中的任務（優先微任務隊列），不斷重複這個過程就叫做js的事件輪循機制。

宏任務和微任務

• 3.任務隊列分爲宏任務隊列（可有多個）和微任務隊列（只能有一個）。
• 4.主線程的代碼就是放置在第一個宏任務隊列中。
• 5.同一個宏任務的所有代碼從上往下順序讀取，同步代碼直接執行，異步代碼形成事件後（回調條件被觸發，任務已就緒）後進入相應的任務隊列（宏任務進宏任務隊列，微任務進微任務隊列。

實踐代碼

console.log('----------------- 主線程初始代碼開始 -----------------');
// 宏任務1最晚形成事件，1秒後任務就緒，進入宏任務隊列。
setTimeout(() => {
    console.log('宏任務1被執行');
}, 1000);
// 宏任務2最先形成事件，任務就緒，進入宏任務隊列。
setTimeout(() => {
    console.log('宏任務2被執行');
}, 0);
// 宏任務3後於宏任務2進入宏任務隊列，根據隊列的後進後出原則後於宏任務2執行。
setTimeout(() => {
    console.log('宏任務3被執行');
}, 0);
new Promise((resolve) =>{
    // Promise的參數函數立即執行，屬於主線程的同步代碼
    console.log('Promise1');
    for (var i = 0; i < 5; i++) {
        console.log(i);
    }
    resolve();
}).then(() => {
    console.log('微任務1被執行');
});
new Promise((resolve) =>{
    console.log('Promise2');
    resolve();
}).then(() => {
    console.log('微任務2被執行');
});
new Promise((resolve) =>{
    setTimeout(()=>{
        console.log('宏任務4被執行');
        resolve();
    },2000);

}).then(() => {
    console.log('微任務3被執行');
});
new Promise((resolve) =>{
    setTimeout(()=>{
        console.log('宏任務5被執行');
        resolve();
    },1000);

}).then(() => {
    console.log('微任務4被執行');
});

console.log('----------------- 主線程初始代碼開始，讀取任務隊列 -----------------');

實踐結果

結果分析

• 主線程初始開始至結束：主線程往下順序初次執行完所有同步代碼。
• 微任務1、2被執行：優先讀取微任務隊列，同時保證先進先出。
• 宏任務2315被執行：微任務隊列爲空，執行宏任務隊列2315，優先形成事件進入隊列的先執行。
• 微任務4被執行：宏任務5執行後創建了微任務4並進入微任務隊列，執行微任務4。
• 宏任務4被執行：微任務隊列爲空，再過1秒後宏任務4進入宏任務隊列，執行宏任務4。
• 微任務3被執行：宏任務4執行後創建了微任務3並進入微任務隊列，執行微任務3。

宏任務和微任務的分類

宏任務

• setTimeout
• setInterval
• requrestAnimationFrame

微任務

• new Promise().then(回調)
• process.nextTick