JavaScript中的宏任務和微任務機制是什么

本文小編為大家詳細介紹“JavaScript中的宏任務和微任務機制是什么”，內容詳細，步驟清晰，細節處理妥當，希望這篇“JavaScript中的宏任務和微任務機制是什么”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

引入

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

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

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

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

宏任務與微任務

宏任務隊列

微任務隊列

棧與調用棧

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

調用棧

棧

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

調用棧中，放的是要執行的代碼

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

消息隊列（任務隊列)

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

隊列中，放的是將要執行的代碼

當調用棧中的代碼執行完畢后，隊列中的代碼按照順序依次進入到調用棧中執行

在JS中任務隊列有兩種

宏任務隊列

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

微任務隊列

Promise的回調函數（then、catch、finally)在微任務隊列中排隊

整個流程

• 執行調用棧中的代碼

• 執行微任務中的所有任務

• 執行宏任務中的所有任務

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

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

Promise的執行原理

• Promise在執行時，then就相當于給Promise了回調函數

• 當promnise的狀態從pending 變為 fulfilled時，then的回調函數會被放入任務隊列中

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

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

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

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

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

讀到這里，這篇“JavaScript中的宏任務和微任務機制是什么”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。