引入

// 開啟一個定時器 1秒后執(zhí)行
setTimeout( () => {
    console.log(1)
}, 1000)
console.log(2)

以上的代碼控制臺的輸出結果是“ 2，1";即先輸出2再輸出1；先執(zhí)行的是打印”2“的內(nèi)容，再執(zhí)行定時器中1秒之后打印”1"的內(nèi)容；

// 開啟一個定時器 1秒后執(zhí)行
setTimeout( () => {
    console.log(1)
}, 0)
console.log(2)

將定時器中的時間改為0，即立即觸發(fā)，代碼控制臺的輸出結果仍然為"2, 1"；定時器的作用是間隔一段時間后，將函數(shù)放入到任務隊列中，而 ”console.log(2)“則是直接在調(diào)用棧中執(zhí)行，執(zhí)行完畢了，消息隊列中的定時器才會進入到調(diào)用棧中執(zhí)行代碼

宏任務與微任務

宏任務隊列

微任務隊列

棧與調(diào)用棧

JS是單線程的，它的運行是基于時間循環(huán)機制（event loop）

調(diào)用棧

棧

棧是一種數(shù)據(jù)結構，后進先出(l類比于彈夾中的子彈最后壓進最先射出）

調(diào)用棧中，放的是要執(zhí)行的代碼

執(zhí)行的代碼在棧中從上到下依次執(zhí)行（上面的是左后進去的，所以最先執(zhí)行）

消息隊列（任務隊列)

隊列 隊列是一種數(shù)據(jù)結構，先進先出（類比于排隊打飯，排前面的先打）

隊列中，放的是將要執(zhí)行的代碼

當調(diào)用棧中的代碼執(zhí)行完畢后，隊列中的代碼按照順序依次進入到調(diào)用棧中執(zhí)行

在JS中任務隊列有兩種

宏任務隊列

大部分代碼都去宏任務隊列中排隊

微任務隊列

Promise的回調(diào)函數(shù)（then、catch、finally)在微任務隊列中排隊

整個流程

• 執(zhí)行調(diào)用棧中的代碼
• 執(zhí)行微任務中的所有任務
• 執(zhí)行宏任務中的所有任務

// 開啟一個定時器 1秒后執(zhí)行
setTimeout( () => {
    console.log(1)
}, 0)
Promise.resolve(1).then(() => {
    console.log(2)
})
//全局作用域的代碼一定是位于棧中的
console.log(3)

上述代碼的執(zhí)行結果是”3 2 1“；打印"3”的語句是位于全局作用域中，一定是位于調(diào)用棧中的，所以最先執(zhí)行，

Promise的執(zhí)行原理

• Promise在執(zhí)行時，then就相當于給Promise了回調(diào)函數(shù)
• 當promnise的狀態(tài)從pending 變?yōu)?fulfilled時，then的回調(diào)函數(shù)會被放入任務隊列中

queueMicrotask() 用來向微任務隊列中添加一個任務

// 開啟一個定時器 1秒后執(zhí)行,在宏任務隊列中等待
setTimeout( () => {
    console.log(1)
}, 0)
// 在微任務隊列中等待
Promise.resolve(1).then(() => {
    console.log(2)
})
// 在為任務隊列中
Promise.resolve().then(()=> {
    console.log(3)
})

執(zhí)行結果是“2 3 1”；首先“2”和“3"是放在微任務中的，”1“是放在宏任務中，先執(zhí)行的應該是微任務中的，隊列中遵循“先進先出”，“2"先進所以先出到調(diào)用棧中運行，然后是”3“，最后是宏任務中的"1"

// 在微任務隊列中等待
Promise.resolve(1).then(() => {
    setTimeout( () => {
        console.log(1)
    }, 0)
})
// 在為任務隊列中
Promise.resolve().then(()=> {
    console.log(3)
})

執(zhí)行的結果是”3 1”；定時器的外層雖然是放在微任務的中，外層的Promise先執(zhí)行，但由于內(nèi)部有定時器隨后進入了宏任務，所以下面的“3”處于微任務中就直接進入調(diào)用棧執(zhí)行了，所以執(zhí)行的結果為“31"

到此這篇關于深入理解JavaScript中的宏任務和微任務機制的文章就介紹到這了,更多相關JS中的宏任務和微任務內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論