Event Loop例子

事件循环：macrotask与microtask

JS的执行机制如图：

JS的执行机制

分析一道执行顺序的例子

console.log('1');
setTimeout(function() {
    console.log('2');
    process.nextTick(function() {
        console.log('3');
    })
    new Promise(function(resolve) {
        console.log('4');
        resolve();
    }).then(function() {
        console.log('5')
    })
})
process.nextTick(function() {
    console.log('6');
})
new Promise(function(resolve) {
    console.log('7');
    resolve();
}).then(function() {
    console.log('8')
})
setTimeout(function() {
    console.log('9');
    process.nextTick(function() {
        console.log('10');
    })
    new Promise(function(resolve) {
        console.log('11');
        resolve();
    }).then(function() {
        console.log('12')
    })
}

• 第一次事件循环流程：

1. 进入主线程，console.log(1)
2. setTimeout异步执行，将其回调函数放入Event Queue中，记为setTimeout1
3. process.nextTick()，将其回调函数存入微任务队列中，记为process1
4. Promise，new Promise()会立即执行console.log(7)，then被存入微任务队列中m
5. setTimeout，其回调函数存入宏任务事件队列中，记为setTimeout2

第一轮事件循环输出结果1，7，6，8

• 第二轮事件循环从setTimeout1开始

1. console.log(2)
2. process.nextTick() 存入微任务中，记为process2.
   3 new Promise()立即执行输出4，then也存入到微任务队列中，记为promise2

第二轮事件循环结束，第二轮输出2，4，3，5
第三轮事件循环开始，只剩setTimeout2了，类似于setTimeout1执行，结果输出为9，11，10，12
整段代码，共进行了三次事件循环，完整的输出为1，7，6，8，2，4，3，5，9，11，10，12。