本文章將淺談瀏覽器宏任務與微任務執行機制 請看完
我有理由相信，在面試程序中你遇到的如下問題：（他們是怎么執行并輸出的）
setTimeout(()=>{
console.log(1)
})
console.log(2)
let a = new Promise((resolve,reject)=>{
console.log(3)
resolve(4)
}).then(res=>{
console.log(res)
}).catch(err=>{
console.log(err)
})
console.log(5)
我們先來簡單總結概念：在js執行中，代碼從第一行開始被解釋的時候（事件回圈）便會進行任務佇列的執行機制，此時會出現宏任務佇列每個宏任務下有若干個微任務，稱為微任務佇列 當第一個宏任務執行完成之后才會執行下一個宏任務 每一個宏任務中的微任務依次執行
讓我們看看：對于前端來說宏任務與微任務分別有什么？(知道這四個就行)
| 宏任務 | 微任務 |
|---|---|
| setTimeOut | nextTick |
| setInterval | Promise，console |
我們就用上面這個題做分析（ 重點來了： Promise 被宣告的瞬間就會執行，同時他有：等待（pending）、已完成（fulfilled）、已拒絕（rejected）三種狀態 ，）來分析一下為什么輸出 2 3 5 4 1
setTimeout(()=>{
console.log(1) //宏任務中 最后執行
})
console.log(2) //自上而下 第一個輸出： 我們得到2
let a = new Promise((resolve,reject)=>{
console.log(3) //第二個輸出 Promise被執行 此時的狀態是pending
// 遇到第一個異步停止 （.then）
resolve(4)
}).then(res=>{ //第四個執行 由于我們是resolve 所以輸出 4 如果是 rejected將會進入到.catch中去執行
console.log(res)
}).catch(err=>{
console.log(err)
})
console.log(5) //第三個輸出 5 你或許會疑惑怎么執行到這里了 事實上Promise還存在，狀態是pending
// 輸出 2 3 5 4 1
- 我們知道了 setTimeout 是一個宏任務 所以他必將等待上一個宏任務執行完成，因此 它是最后輸出的 （即使放在Promise中也是）
- 然后執行到了 console.log(2) 這一行 輸出 2
- 此時執行Promise運行的結果 雖然Promise的狀態沒有改變 但是被第一個異步函式.then打斷了執行 所以瀏覽器決議下一個
- 到了最后一行輸出5
- 下一個宏任務setTimeout 執行 輸出 1
- 至此：我們得到了 2 3 5 4 1
注意： Promise.resolve().then(function () {console.log(‘two1’);}); 和 new Promise之后的then是同一級，從上到下執行 ，執行順序在 console.log之后（他需要等待狀態的改變）假如我們是這樣的代碼 那么他的輸出在 ‘a.then’之前
setTimeout(()=>{
console.log(1) //宏任務中 最后執行
})
console.log(2) //自上而下 第一個輸出： 我們得到2
Promise.resolve().then(function () { // 決議Promise
console.log('Promise');
});
let a = new Promise((resolve,reject)=>{
console.log(3) //第二個輸出 Promise被執行 此時的狀態是pending
// 遇到第一個異步停止 （.then）
resolve(4)
}).then(res=>{ //第四個執行 由于我們是resolve 所以輸出 4 如果是 rejected將會進入到.catch中去執行
console.log(res)
}).catch(err=>{
console.log(err)
})
console.log(5) //第三個輸出 5 你或許會疑惑怎么執行到這里了 事實上Promise還存在，狀態是pending
// 輸出 2 3 5 Promise 4 1
其他有關此方面的疑問或者此方法不理解的地方您可留言，我會盡快回復并幫您解決，本文章淺談相關的宏任務，微任務和Promise ，希望幫助您輕松應對面試，如需要更深研究，請參考相關文章
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/300259.html
標籤：其他