1 代码
首先,直接上代码(我的作业):
setTimeout(() => {
console.log(1);
}, 100)
setTimeout(() => {
console.log(2);
})
new Promise((resolve) => {
console.log(3)
resolve();
}).then(() => {
console.log(4);
})
new Promise((resolve) => {
console.log(5);
})
async function asyn1() {
console.log(6);
}
asyn1().then(() => {
console.log(7);
})
console.log(8);
直接说一下运行结果:
3 5 6 8 4 7 2 1
2 为什么会这样
从我的理解来看,这是由于JS中的事件循环机制(Event Loop)决定的,JS中的事件循环将任务队列分为宏任务(Tasks)和微任务(Microtasks)。任务队列的调度机制和我们想的不一样,因此结果页不一样。
2.1 什么任务属于宏任务/微任务
宏任务队列包含任务:
script(主程序代码),setTimeout,setInterval,setImmediate,I/O,UI rendering
微任务队列包含任务:
process.nextTick,Promises,Object.observe,MutationObserver
2.2 揭晓流程
// 打印次序: 3 5 6 8 4 7 2 1
// log(1) 延迟至宏任务队列,延迟0.1s执行
// log(2) 延迟至宏任务队列,不延迟
// log(3) 直接打印,then中的log(4)到微任务队列
// log(5) new Promise()直接打印;
// log(6) 异步方法(相当于一个隐式的Promise),打印
// log(7) then 到微任务队列
// log(8) 直接打印
// 至此,一次事件循环结束,轮询微任务队列,再轮询宏任务队列
// 微任务队列,log(4),log(7)
// 下一轮的宏任务:log(2),log(1)
3 小结
这是第一次对JS的事件处理进行分析,有什么错误还请包涵和指正。