微任务与宏任务执行顺序
微任务队列只有一个,宏任务队列可以有多个。
宏任务包括: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