您好,登錄后才能下訂單哦!
本文小編為大家詳細介紹“JavaScript中的宏任務(wù)和微任務(wù)機制是什么”,內(nèi)容詳細,步驟清晰,細節(jié)處理妥當(dāng),希望這篇“JavaScript中的宏任務(wù)和微任務(wù)機制是什么”文章能幫助大家解決疑惑,下面跟著小編的思路慢慢深入,一起來學(xué)習(xí)新知識吧。
// 開啟一個定時器 1秒后執(zhí)行 setTimeout( () => { console.log(1) }, 1000) console.log(2)
以上的代碼控制臺的輸出結(jié)果是“ 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ā),代碼控制臺的輸出結(jié)果仍然為"2, 1";定時器的作用是間隔一段時間后,將函數(shù)放入到任務(wù)隊列中,而 ”console.log(2)“則是直接在調(diào)用棧中執(zhí)行,執(zhí)行完畢了,消息隊列中的定時器才會進入到調(diào)用棧中執(zhí)行代碼
宏任務(wù)隊列
微任務(wù)隊列
棧與調(diào)用棧
JS是單線程的,它的運行是基于時間循環(huán)機制(event loop)
調(diào)用棧
棧
棧是一種數(shù)據(jù)結(jié)構(gòu),后進先出(l類比于彈夾中的子彈最后壓進最先射出)
調(diào)用棧中,放的是要執(zhí)行的代碼
執(zhí)行的代碼在棧中從上到下依次執(zhí)行(上面的是左后進去的,所以最先執(zhí)行)
消息隊列(任務(wù)隊列)
隊列 隊列是一種數(shù)據(jù)結(jié)構(gòu),先進先出(類比于排隊打飯,排前面的先打)
隊列中,放的是將要執(zhí)行的代碼
當(dāng)調(diào)用棧中的代碼執(zhí)行完畢后,隊列中的代碼按照順序依次進入到調(diào)用棧中執(zhí)行
在JS中任務(wù)隊列有兩種
宏任務(wù)隊列
大部分代碼都去宏任務(wù)隊列中排隊
微任務(wù)隊列
Promise的回調(diào)函數(shù)(then、catch、finally)在微任務(wù)隊列中排隊
整個流程
執(zhí)行調(diào)用棧中的代碼
執(zhí)行微任務(wù)中的所有任務(wù)
執(zhí)行宏任務(wù)中的所有任務(wù)
// 開啟一個定時器 1秒后執(zhí)行 setTimeout( () => { console.log(1) }, 0) Promise.resolve(1).then(() => { console.log(2) }) //全局作用域的代碼一定是位于棧中的 console.log(3)
上述代碼的執(zhí)行結(jié)果是”3 2 1“;打印"3”的語句是位于全局作用域中,一定是位于調(diào)用棧中的,所以最先執(zhí)行,
Promise的執(zhí)行原理
Promise在執(zhí)行時,then就相當(dāng)于給Promise了回調(diào)函數(shù)
當(dāng)promnise的狀態(tài)從pending 變?yōu)?fulfilled時,then的回調(diào)函數(shù)會被放入任務(wù)隊列中
queueMicrotask() 用來向微任務(wù)隊列中添加一個任務(wù)
// 開啟一個定時器 1秒后執(zhí)行,在宏任務(wù)隊列中等待 setTimeout( () => { console.log(1) }, 0) // 在微任務(wù)隊列中等待 Promise.resolve(1).then(() => { console.log(2) }) // 在為任務(wù)隊列中 Promise.resolve().then(()=> { console.log(3) })
執(zhí)行結(jié)果是“2 3 1”;首先“2”和“3"是放在微任務(wù)中的,”1“是放在宏任務(wù)中,先執(zhí)行的應(yīng)該是微任務(wù)中的,隊列中遵循“先進先出”,“2"先進所以先出到調(diào)用棧中運行,然后是”3“,最后是宏任務(wù)中的"1"
// 在微任務(wù)隊列中等待 Promise.resolve(1).then(() => { setTimeout( () => { console.log(1) }, 0) }) // 在為任務(wù)隊列中 Promise.resolve().then(()=> { console.log(3) })
執(zhí)行的結(jié)果是”3 1”;定時器的外層雖然是放在微任務(wù)的中,外層的Promise先執(zhí)行,但由于內(nèi)部有定時器隨后進入了宏任務(wù),所以下面的“3”處于微任務(wù)中就直接進入調(diào)用棧執(zhí)行了,所以執(zhí)行的結(jié)果為“31"
讀到這里,這篇“JavaScript中的宏任務(wù)和微任務(wù)機制是什么”文章已經(jīng)介紹完畢,想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領(lǐng)會,如果想了解更多相關(guān)內(nèi)容的文章,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。