JavaScript 运行机制之：微任务(Microtask)与宏任务(Macrotask)队列的机制

微任务与宏任务执行顺序

微任务队列只有一个，宏任务队列可以有多个。

  宏任务包括：script(全局任务), setTimeout, setInterval, setImmediate, I/O, UI rendering

  微任务包括： new Promise().then(回调), process.nextTick, MutationObserver(html5新特性)

#Object.observe(已废弃)

学习了这篇文章，提到的例子。

以下是详解过程，有问题请留言。

借用网友画的图

console.log('a1');  // 1

Promise.resolve().then(() => {
    console.log('Promise-1');   // 3

    setTimeout(() => {
        console.log('setTimeout-2');    // 6
    }, 0);
});

setTimeout(() => {
    console.log('setTimeout-1');    // 4

    Promise.resolve().then(() => {
        console.log('Promise-2');	// 5
    });
}, 0);

console.log('a2');  // 2

a1
a2
Promise-1
setTimeout-1
Promise-2
setTimeout-2

// 第一轮
// 1.0  a1 第一轮 执行的全局任务。
// 1.1  Promise.resolve() 加入到第一轮的微任务队列中。
// 1.2  setTimeout('setTimeout-1') 生成宏任务队列一。
// 1.3  a2 第一轮 最后一个执行的全局任务，并检查第一轮微任务队列。
// 1.4  'Promise-1' 微任务被执行。
// 1.5  setTimeout('setTimeout-2') 生成宏任务队列二。
// 第一轮事件循环结束, 依次输出 a1, a2, Promise-1
//
// 第二轮
// 2.0 'setTimeout-1' 执行在第一轮生成宏任务队列1, 宏任务队列清空，检查微任务队列。
// 2.1 'Promise-2' 执行第二轮加入的微任务。
// 第二轮结束，依次输出 setTimeout-1，Promise-2

// 第三轮
// 3.0 'setTimeout-2' 执行第一轮生成的宏任务队列二，输出'setTimeout-2' 结束。

输出结果：

a1
a2
Promise-1
setTimeout-1
Promise-2
setTimeout-2