彻底搞懂事件循环机制

JS是单线程的，最大的特点是维持了事件循环

事件循环的组成由主线程和任务队列

任务队列分为宏任务和微任务

执行顺序如下：

主线程  > 微任务 > 宏任务

<script>
console.log('start');
setTimeout(() => {
    console.log('children2');
    Promise.resolve().then(() => {
        console.log('children3');
    })
}, 0)
new Promise(function(resolve, reject) {
    console.log('children4');
    setTimeout(function() {
        console.log('children5');
        resolve('children6');
    }, 0)
}).then((res) => {
    console.log('children7');
    setTimeout(() => {
        console.log(res);
    }, 0);
})
</script>

这段代码的执行顺序是什么呢？

下面是手画图示：

执行顺序如下： 

start   -> children4->children2->children3->children5->children7->children6

 你可能会疑惑？为什么先执行宏任务再执行微任务呢?

很明显这里的微任务在宏任务里面，也就是说这里的微任务依赖宏任务的执行

注意：new promise是一个主线程，它身上的.then .catch等这些方法才是微任务