js事件循环 - 技术栈

js事件循环

whuhewei2026-04-08 13:57

以下代码的打印顺序？

javascript 复制代码

console.log(1);
setTimeout(() => {
    console.log(2);
    new Promise((resolve) => {
        console.log(8);
        resolve();
    }).then(() => {
        console.log(6);
    });
}, 0);
console.log(3);
setTimeout(() => {
    console.log(4);
    Promise.resolve().then(() => {
        console.log(7);
    });
}, 0);
console.log(5);

这段代码的打印顺序是：‌1, 3, 5, 2, 8, 6, 4, 7‌。

原因分析

这涉及JavaScript事件循环（Event Loop）中宏任务（Macro Task）与微任务（Micro Task）的执行顺序：

同步代码立即执行： 首先，所有不在异步回调中的console.log会按顺序执行。因此初始输出为1，3，5。
异步任务进入队列： 两个setTimeout的回调函数（属于宏任务）被放入宏任务队列等待执行。此时，第一个宏任务队列中包含了两个待执行的回调。
执行第一个宏任务： 当同步代码执行栈清空后，事件循环开始处理宏任务队列。它取出第一个setTimeout的回调并执行：console.log(2) 打印 ‌2‌ 。
执行 new Promise 的构造函数，console.log(8) 是同步代码，立即打印 ‌8‌ 。
Promise.resolve() 后，其 .then(() => { console.log(6); }) 回调（属于微任务）被放入微任务队列。
‌执行微任务‌： 在当前宏任务执行完毕后、开始下一个宏任务之前，事件循环会清空微任务队列。因此，它会立即执行刚加入的微任务，console.log(6) 打印 ‌6‌。
执行下一个宏任务‌： 微任务队列清空后，事件循环继续处理宏任务队列，取出第二个 setTimeout 的回调并执行：
console.log(4) 打印 ‌4‌。Promise.resolve().then(...) 的回调（微任务）被放入微任务队列。
再次执行微任务‌： 同样，在当前宏任务结束后，事件循环会立即清空微任务队列，执行 console.log(7)，打印 ‌7‌。

‌关键点总结‌：

‌执行顺序‌ ：同步代码 > 微任务 > 下一个宏任务 > 微任务 ......

setTimeout 的回调是‌宏任务‌ 。

Promise.then 的回调是‌微任务‌。

每个宏任务执行完毕后，都会检查并清空当前所有的微任务，然后才会执行下一个宏任务。