为何setTimeout回调晚于Promise.resolve()执行？

问题背景 #

我对事件循环的理解如下：

• 事件循环包含多个阶段，每个阶段拥有独立的回调队列
• 微任务队列（Microtask queue）存放已决议Promise的回调，会在事件循环的每个阶段结束后执行
• 事件循环的第一个阶段是定时器阶段（timers phase）

给定如下代码：

setTimeout(() => console.log('TIMEOUT')); 
Promise.resolve().then(() => console.log('PROMISE')); 

我原本预期的日志输出为：

TIMEOUT
PROMISE

但实际输出却是：

PROMISE
TIMEOUT

我的疑问是：既然定时器阶段是事件循环的第一个阶段，且每个阶段先执行自身回调队列再处理微任务，为什么定时器的日志反而比微任务的晚？

核心原因解析 #

你忽略了一个关键细节：setTimeout的回调不会立刻进入定时器阶段的队列。

当这段代码运行时，整个脚本是在事件循环的初始同步执行栈中执行的：

1. 调用setTimeout后，运行环境（浏览器/Node.js）会启动定时器计时，但此时回调只是被标记为「计时结束后加入定时器队列」，并不会立刻进入队列。
2. 调用Promise.resolve().then()时，这个Promise会立刻变为已决议状态，它的回调会被直接加入微任务队列。

当同步执行栈中的代码全部执行完毕后，事件循环才会开始处理任务，顺序是这样的：

1. 首先优先处理微任务队列，只要队列里有任务就会全部执行完毕——此时微任务队列中的console.log('PROMISE')被执行，输出PROMISE。
2. 等微任务队列彻底清空后，事件循环才会进入第一个正式阶段（定时器阶段）。这时之前的定时器计时已经完成，它的回调被加入定时器队列，事件循环执行该回调，输出TIMEOUT。

总结来说：同步代码执行完成后，会先清空所有微任务，之后才会开始处理事件循环各阶段的任务队列，这就是为什么微任务的输出会比定时器更早。

内容的提问来源于stack exchange，提问作者J Seabolt