event-loop的microtask和macrotask

有一个常见的面试题，相信很多人都看过。

for (var i = 0; i < 5; i++) {
  setTimeout(function() {
    console.log(i);
  }, 1000 * i);
}//立即执行函数，用let都可以解决这个问题

会输出5个5，虽然写了setTimeout，但其实，里面的function是在for循环结束之后才执行的。下面这个例子也可以证明。(其实定时器的意思是：指定某个任务在主线程最早可得的空闲时间后开始执行)

// 1. 开始执行
console.log('script start'); // 2. 打印字符串 "script start"
setTimeout(
    function() {                 // 5. 浏览器在 0ms 之后将该函数推入任务队列
                                 //    而到第5步时才会被主线程执行
      console.log('setTimeout'); // 6. 打印字符串 "setTimeout"
    },
    0
);                       // 3. 调用 setTimeout 函数，并定义其完成后执行的回调函数
console.log('script end');   // 4. 打印字符串 "script end"
// 5. 主线程执行栈清空，开始读取 任务队列 中的任务

异步函数是在主任务队列执行完之后才能执行，与定时多快无关，都是得在主线程执行完了，空闲了，才会执行。
那么setTimeout和Promise两者的回掉哪个会先执行呢？

setTimeout(function() {
    console.log('timeout1');
})
 
new Promise(function(resolve) {
    console.log('promise1');
    for(var i = 0; i < 1000; i++) {
        i == 99 && resolve();
    }
    console.log('promise2');
}).then(function() {
    console.log('then1');
})
 
console.log('global1');//会按照下面的顺序输出
//promise1
//promise2
//global1
//then1
//timeout1

你会发现，promise的回掉在定时器之前，这是因为异步任务可以分成macrotask 和 microtask两种类型，Promise中的then方法的函数会被推入 microtask 队列，而setTimeout的任务会被推入 macrotask 队列。

macrotasks: setTimeout, setInterval, setImmediate, I/O, UI rendering
microtasks: process.nextTick, Promises, MutationObserver（监听DOM树结构是否发生变化）, .then()

在主任务队列执行完毕后，会执行microtask任务队列里的任务，然后再执行macrotask 队列里的任务。

主队列任务 > microtask队列任务 > macrotask队列任务

 let a = new Promise((resolve, reject) => {
        resolve(2)
    })
    a.then((v) => {console.log(v)})//microtask

    setTimeout(() => {//macrotask
        console.log(4);
    },0)

    let scc = setInterval(() => {//macrotask
        console.log('5')
    },0)

    setTimeout(() => {//macrotask
        console.log(6);
        Promise.resolve().then(() => {//microtask
            console.log(7)
        },0);
        setTimeout(() => {//macrotask
            console.log('58');
            clearInterval(scc);
        },0)
    },0)

    Promise.resolve().then(() => {//microtask
        console.log(3)
    });
    console.log(1)//主线程

运行主线程输出1
new Promise 属于同步，不属于两种task所以输出2
执行所有的microtask 输出3
microtask执行完，开始执行macrotask,输出4，5，6
到 Promise.resolve().then(() => {
console.log(7)
},0);的时候，是microtask,执行他，输出7，接下去会执行macrotask的interval，输出5
执行macrotask输出58，最后清除定时器

QQ截图20171129155342.png

最后编辑于：2017.11.29 15:54:17