引入

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

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

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

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

宏任務(wù)與微任務(wù)

宏任務(wù)隊(duì)列

微任務(wù)隊(duì)列

棧與調(diào)用棧

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

調(diào)用棧

棧

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

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

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

消息隊(duì)列（任務(wù)隊(duì)列)

隊(duì)列 隊(duì)列是一種數(shù)據(jù)結(jié)構(gòu)，先進(jìn)先出（類比于排隊(duì)打飯，排前面的先打）

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

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

在JS中任務(wù)隊(duì)列有兩種

宏任務(wù)隊(duì)列

大部分代碼都去宏任務(wù)隊(duì)列中排隊(duì)

微任務(wù)隊(duì)列

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

整個(gè)流程

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

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

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

Promise的執(zhí)行原理

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

queueMicrotask() 用來(lái)向微任務(wù)隊(duì)列中添加一個(gè)任務(wù)

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

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

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

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

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

最新評(píng)論