一张图让你看懂“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) 如果有三级宏任务， 应该等所有的二级宏任务执行完了以后再执行三级宏任务
还有其他问题的话欢迎在评论区提出哦