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

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

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

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

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

两大原则：

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

简单案例

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

*/

综合案例

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为例：

//在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-…