一張圖讓你看懂「js中的事件執行機制, 事件輪詢?宏任務微任務?」

先大概說一下幾個概念:

---

我所接觸到的宏任務:
主js、setTimeout、setInterval、setImmediately
我所接觸到的微任務:
process.nextTick()、promise.then()
概念性的東西我就不贅述了, 直接上代碼:

console.log('1');

setTimeout(function () {
    console.log('2');
    
    process.nextTick(function () {
        console.log('3');
    })

    newPromise(function (resolve) {
        console.log('4');
        resolve();
    }).then(function () {
        console.log('5')
    })
})


newPromise(function (resolve) {
    console.log('7');
    resolve();
}).then(function () {
    console.log('8')
})

process.nextTick(function () {
    console.log('6');
})  

setTimeout(function () {
    console.log('9');
    
    newPromise(function (resolve) {
        console.log('11');
        resolve();
    }).then(function () {
        console.log('12')
    })

    process.nextTick(function () {
        console.log('10');
    })
})


console.log('13');

代碼有一點點多, 可是不要慌, 請看下圖:
爲了讓圖看起來更加的通俗易懂, 我就用
console.log('2');表示某個代碼塊哈

---

總結:
1) 先執行同步代碼, 再執行異步代碼
2) 執行異步代碼時, 先支持宏任務下的微任務, 再執行宏任務下的二級宏任務
3) 若是有三級宏任務， 應該等全部的二級宏任務執行完了之後再執行三級宏任務
還有其餘問題的話歡迎在評論區提出哦