一个包含 同步任务、微任务(Promise)、宏任务(setTimeout) 的例子,JS 是怎么调度这些任务的。
🎯 例子代码(建议复制到浏览器控制台运行)
console.log(‘同步任务 1’);
setTimeout(() => {
console.log(‘宏任务 1’);
}, 0);
Promise.resolve().then(() => {
console.log(‘微任务 1’);
});
console.log(‘同步任务 2’);
setTimeout(() => {
console.log(‘宏任务 2’);
}, 0);
Promise.resolve().then(() => {
console.log(‘微任务 2’);
});
console.log(‘同步任务 3’);
✅ 输出顺序是:
同步任务 1
同步任务 2
同步任务 3
微任务 1
微任务 2
宏任务 1
宏任务 2
🔍 为什么是这样?看执行顺序解析:
💡 如果你再加一个 await 会怎样?
async function test() {
console.log(‘async 1’);
await Promise.resolve();
console.log(‘async 2’);
}
test();
console.log(‘主线程’);
Promise.resolve().then(() => {
console.log(‘then’);
});
输出顺序:
async 1
主线程
then
async 2
解释:
• async 1 是同步部分,立即执行。
• await Promise.resolve() 会暂停 test() 剩下的部分,把后面的逻辑变成微任务。
• 主线程 是普通同步代码,立即执行。
• then 是微任务 → 执行
• async 2 也作为微任务 → 紧随其后执行