看明白两个案例，秒懂事件循环

事件循环的任务队列包括宏任务 和微任务

执行顺序就是：同步代码 -> 第一轮微任务 -> 第一轮宏任务 -> 第二轮微任务 ->...

宏任务有：setTimeout , setInterval , setImmediate, I/O, UI rendering。

微任务有：process.nextTick , Promise, Object.observe(已废弃), MutationObserver(html5新特性)

两大原则：

setTimeout和setInterval同源，且均优先于setImmediate执行
nextTick队列会比Promie.then方法里面的代码先执行

简单案例

js 复制代码

setTimeout(function() {
    console.log('timeout1'); // 5-第一轮宏任务
})

new Promise(function(resolve) {
    console.log('promise1'); // 1-同步代码
    for(var i = 0; i < 1000; i++) {
        i == 99 && resolve();
    }
    console.log('promise2'); // 2-同步代码
}).then(function() {
    console.log('then1'); // 4-第一轮微任务
})

console.log('global1'); // 3-同步代码


/*
promise1
promise2
global1
then1
timeout1
*/

综合案例

js 复制代码

console.log('golb1'); // 1-同步代码

setTimeout(function() {
    console.log('timeout1'); // 3.1-第一轮宏任务
    process.nextTick(function() {
        console.log('timeout1_nextTick'); // 3.3-第二轮微任务
    })
    new Promise(function(resolve) {
        console.log('timeout1_promise'); // 3.2-第一轮宏任务
        resolve();
    }).then(function() {
        console.log('timeout1_then') // 3.4-第二轮微任务
    })
})

setImmediate(function() {
    console.log('immediate1'); // 3.1-第一轮宏任务
    process.nextTick(function() {
        console.log('immediate1_nextTick'); // 3.3-第二轮微任务
    })
    new Promise(function(resolve) {
        console.log('immediate1_promise'); // 3.2-第一轮宏任务
        resolve();
    }).then(function() {
        console.log('immediate1_then') // 3.4-第二轮微任务
    })
})

process.nextTick(function() {
    console.log('glob1_nextTick');// 2.1-第一轮微任务
})
new Promise(function(resolve) {
    console.log('glob1_promise');// 1-同步代码
    resolve();
}).then(function() {
    console.log('glob1_then') // 2.2-第一轮微任务
})

setTimeout(function() {
    console.log('timeout2'); // 3.1-第一轮宏任务
    process.nextTick(function() {
        console.log('timeout2_nextTick'); // 3.3-第二轮微任务
    })
    new Promise(function(resolve) {
        console.log('timeout2_promise'); // 3.2-第一轮宏任务
        resolve();
    }).then(function() {
        console.log('timeout2_then') // 3.4-第二轮微任务
    })
})

process.nextTick(function() {
    console.log('glob2_nextTick');// 2.1-第一轮微任务
})
new Promise(function(resolve) {
    console.log('glob2_promise');// 1-同步代码
    resolve();
}).then(function() {
    console.log('glob2_then')// 2.2-第一轮微任务
})

setImmediate(function() {
    console.log('immediate2'); // 3.1-第一轮宏任务
    process.nextTick(function() {
        console.log('immediate2_nextTick'); // 3.3-第二轮微任务
    })
    new Promise(function(resolve) {
        console.log('immediate2_promise'); // 3.2-第一轮宏任务
        resolve();
    }).then(function() {
        console.log('immediate2_then') // 3.4-第二轮微任务
    })
})

/*
（1-同步代码）
golb1
glob1_promise
glob2_promise
(2-第一轮微任务)
glob1_nextTick
glob2_nextTick
glob1_then
glob2_then
(3-第一轮宏任务)
(setTimeout)
timeout1
timeout1_promise
timeout1_nextTick
timeout1_then
timeout2
timeout2_promise
timeout2_nextTick
timeout2_then
(setImmediate)
immediate1
immediate1_promise
immediate1_nextTick
immediate1_then
immediate2
immediate2_promise
immediate2_nextTick
immediate2_then
*/

注：在Node 11前，Node的事件循环会与浏览器存在差异，以上面案例中的两个setTimeout为例：

js 复制代码

//在Node 11前
timeout1
timeout1_promise
timeout2
timeout2_promise
timeout1_nextTick
timeout2_nextTick
timeout1_then
timeout2_then
// 在Node11后和浏览器
timeout1
timeout1_promise
timeout1_nextTick
timeout1_then
timeout2
timeout2_promise
timeout2_nextTick
timeout2_then

即在同一类任务分发器（如：多个setTimeout），在Node 11前，会先执行所有的nextTick，再到Promise.then；而在Node11后和浏览器，都是依次执行每个setTimeout，在同一个setTimeout里面先执行所有nextTick，再到Promise.then。

Refs：

mp.weixin.qq.com/s/m3a6vjp8-...