问题来源
在学习 Promise 时在 stackoverflow 上看到一个解释 Promise 运行顺序回答.
之前在 学习异步编程 中讲解了 MacroTask 和 MicroTask, 但在最近深入 EventLoop 后又有了更多的了解
EventLoop,MacroTask,MicroTask 之间的关系
macrotasks 与 microtasks 各自的 API
macrotasks: setTimeout, setInterval, setImmediate, requestAnimationFrame, I/O, UI rendering
microtasks: process.nextTick, Promises, Object.observe, MutationObserver
一张图先了解 microtasks 与 macrotasks 在 eventloop 队列里的位置
这里用了上一章 EventLoop 事件循环文章里的图,并在回调队列里标注里 microtask 的位置.
microtasks 与 macrotasks 在 eventloop 里的流程
在没有引入 microtasks 概念前事件循环是这样执行的
while (queue是否有task) {
执行task
}
引入 microtasks 概念后
while (queue是否有macrotasks) {
if (microtasks) 执行空microtasks
再执行macrotasks
}
microtasks 与 macrotasks 在 eventloop 里实际执行结果
// 例1
console.log('script start');
setTimeout(function() {
console.log('setTimeout');
}, 0);
Promise.resolve().then(function() {
console.log('promise1');
}).then(function() {
console.log('promise2');
});
console.log('script end');
// 结果
script start
script end
promise1
promise2
setTimeout
// 当前循环结束
// 进入下一个循环
从 webapi 在 Eventloop 的执行环境我们可以知道 setTimeout 在当前事件循环中将会在 script end 后执行,这是没问题的.
而 promise 作为 microtasks 将会在当前事件循环内的 macrotasks 之前执行完毕.
setTimeout 作为 macrotasks 在例 1 中是最后执行的.
例2
setImmediate(function(){
console.log(1);
},0);
setTimeout(function(){
console.log(2);
},0);
new Promise(function(resolve){
console.log(3);
resolve();
console.log(4);
}).then(function(){
console.log(5);
});
console.log(6);
process.nextTick(function(){
console.log(7);
});
console.log(8);
// 执行顺序
3 4 6 8 7 5 2 1
例 2
process.nextTick 在 node 环境中,属于 microtask
setImmediate 在 macrotasks,优先级小于 setTimeout
定义 new Promise() 是同步代码,在栈内先执行
例3
const p = new Promise((res, rej) => {
res(1)
console.log('定义new Promise - 同步')
}).then(val => {
console.log('microtask start')
console.log('执行then,enqueue micarotask 1')
console.log(val) // 1
})
Promise.resolve({
then(res, rej) {
console.log('执行then,enqueue micarotask 2')
res(5)
}
}).then(val => {
console.log('执行then,enqueue micarotask 3')
console.log(val) // 5
})
console.log('逐行执行1 - 同步')
console.log('逐行执行2 - 同步')
console.log(3) // 3
setTimeout(console.log, 0, 'macrotask start') // 4
setTimeout(console.log, 0, 4) // 4
定义new Promise - 同步
逐行执行1 - 同步
逐行执行2 - 同步
3
// 同步队列执行完毕为空 进入下一个栈
microtask start
执行then,enqueue micarotask 1
1
执行then,enqueue micarotask 2
执行then,enqueue micarotask 3
5
// microtask执行完毕为空 进入下一个栈
macrotask start
4
// macrotask执行完毕为空 结束
例 3
定义 new Promise 是同步函数
Promise.resolve 等 api 为异步 micarotask
例4
<div class="outer">
<div class="inner"></div>
</div>
var outer = document.querySelector('.outer');
var inner = document.querySelector('.inner');
new MutationObserver(function() {
console.log('mutate');
}).observe(outer, {
attributes: true
});
function onClick() {
console.log('click');
setTimeout(function() {
console.log('timeout');
}, 0);
Promise.resolve().then(function() {
console.log('promise');
});
outer.setAttribute('data-random', Math.random());
}
inner.addEventListener('click', onClick);
outer.addEventListener('click', onClick);
// 同时点击到两个div时执行结果
click
promise
mutate
click
promise
mutate
timeout
timeout
例 4 执行效果
没点击前:
1 绑定 new MutationObserver 存入浏览器资源
2 绑定两个 div 元素的 click 事件 存入浏览器资源
3 触发 outer 元素 click 的 onClick 存入浏览器资源
4 触发 inner 元素 click 的 onClick 存入浏览器资源
5 先执行 outer 的回调
6 输出 click
7 执行 setTimeout - macrotask 存入浏览器资源
8 执行 outer.setAttribute('data-random', Math.random()),触发 MutationObserver - marcotask 等待 microtask 先执行
9 执行 Promise.resolve - microtask 输出 promise
10microtask 执行完毕,执行 MutationObserver 输出 mutate
----- 下面执行的并不是 outer 回调里的 setTimeout------
11 执行 inner 的回调
12 输出 inner 回调的 click
13 执行 inner 回调的 setTimeout - macrotask 存入浏览器资源
14 执行 inner 回调 outer.setAttribute('data-random', Math.random()),触发 MutationObserver - marcotask 等待 microtask 先执行
15 执行 inner 回调的 Promise.resolve - microtask 输出 promise
16microtask 执行完毕,执行 MutationObserver 输出 mutate
-- 最后因为两个 setTimeout 都是在触发 inner 回调后存入浏览器资源的 --
所以最后两个 setTimeout 回调完成排入队列执行.
来源: http://www.jianshu.com/p/88043a9f5464