javascript 異步任務的執行順序

衆所周知js是單線程，但js是能夠執行同步和異步任務的，同步的任務衆人皆知是按照順序去執行的；
而異步任務的執行，是有一個優先級的順序的，包括了宏任務（macrotasks）和微任務(microtasks)

宏任務: setTimeout, setInterval, setImmediate, I/O, UI rendering
微任務: Promises.(then catch finally), process.nextTick, MutationObserver

宏任務和微任務的區別在於在事件循環機制中，執行的機制不一樣

• 每次執行棧執行完全部的同步任務後，會在任務隊列中取出異步任務，先將全部微任務執行完成後，纔會執行宏任務
• 因此能夠得出結論，微任務會在宏任務以前執行。

咱們在工做經常使用到的宏任務是setTimeout，而微任務是Promise.then
注意這裏是Promise.then,也就是說new Promise在實例化的過程當中所執行的代碼是同步的，而在then中註冊的回調函數纔是異步。

看下面的代碼，面試題裏常常見的

setTimeout(() => console.log(1))

new Promise((resolve) => {
    resolve()
    console.log(2)
}).then(() => {
    console.log(3)
})

console.log(4)

new Promise在實例化過程當中過程當中執行的代碼是同步的，因此先打印出2，而後是最後一行的4，全部同步任務已經執行完成了，接着執行微任務也就是.then()裏的回調函數，因此打印4，最後執行宏函數setTimeout，最後打印出1

因此上面代碼塊的結果是2 4 3 1

new Promise(resolve => {
    resolve()
    console.log(1)
}).then(_ => {
    console.log(2)
})
new Promise(resolve => {
    resolve()
    console.log(3)
}).then(_ => {
    console.log(4)
})
console.log(5);
setTimeout(_ => console.log(6))
setTimeout(_ => console.log(7))

1 3 5 2 4 6 7

經過上面兩個示例能夠簡單的理解宏任務和微任務的執行順序，若是還想了解更深層的東西，能夠了解一下js的事件循環，這裏就再也不多說了。