1.看一道面试题
问下面的打印结果
console.log('0');
setTimeout(function() {
console.log('1');
}, 0);
Promise.resolve()
.then(() => {
console.log('2');
}).then(() => {
console.log('3');
});
async1();
async function async1() {
console.log('4')
var data = await async2();
console.log(data);
console.log('5');
}
async function async2() {
setTimeout(() => {
console.log('6');
});
return '7';
}
console.log('8');
先贴答案:
0 4 8 2 3 7 5 1 6
2.macrotask(宏任务)
美式发音:mækro
宏任务包括:
- setTimeout
- setInterval
- I/O
- requestAnimationFrame
事件循环会循环的检查macrotask队列,如果检查到有则会执行。
3.microtask(微任务)
美式发音:maɪkro
微任务包括:
- Promise
- async
微任务的处理原则是 挂在队尾,正在处理微任务的过程中,只要有任务,就会一直处理,直到队列清空。
4.Event Loop
下面就是js的Event Loop要处理的任务。
- main
- macrotask
- microtask
我们看上面的题。
- 0 进入执行栈 --> 打印 0
- 1进入宏任务 macrotask = [1]
- 2、3进入微任务 microtask = [2, 3]
- 4 进入执行栈 --> 打印 4
- 6 进入宏任务 macrotask = [1, 6]
- 7进入微任务, 5进入微任务 microtask = [2, 3, 7, 5]
- 8 进入执行栈 -> 打印8
- 执行栈空了,执行微任务 打印 2, 3, 7, 5
- 再执行宏任务 打印 1, 6
结果:
0 4 8 2 3 7 5 1 6