关于JavaScript异步机制底层运行逻辑的确认请求

示例代码 #

console.log('start');
setTimeout(() => console.log('one'), 0);
console.log('two');
setTimeout(() => console.log('three'), 3000);
console.log('finish');

我的理解步骤 #

1. console.log('start')进入调用栈（CallStack），执行后出栈，控制台输出start。
2. 接下来setTimeout(() => console.log('one'), 0)进入调用栈，由于是异步API，会被移交至Web API在后台启动计时，计时完成后其回调函数进入回调队列（Callback queue）。
3. 随后console.log('two')进入调用栈，执行后出栈，此时控制台输出顺序为：start、two。
4. setTimeout(() => console.log('three'), 3000)的处理流程与上述异步API一致：进入调用栈后移交Web API启动3秒计时，计时结束后回调进入队列。
5. console.log('finish')执行后出栈，此时控制台输出顺序为：start、two、finish。
6. 此时回调队列中仅包含one对应的回调函数（three的回调需等3秒计时结束后才会被加入队列）。
7. console.log('one')对应的回调从回调队列进入调用栈执行后出栈，控制台输出顺序变为：start、two、finish、one；3秒后three的回调被推入调用栈执行，最终输出three。

待确认问题 #

Event Loop是否会检查调用栈是否为空，若为空且回调队列中有回调函数，就将其推入调用栈执行，直至队列清空？

回答 #

你的理解整体是正确的，补充两个关键细节后就完全准确：

1. 回调入队时机：setTimeout的回调不是在调用API时直接进入队列，而是要等指定的计时时间到期后，才会被Web API加入回调队列。所以初始阶段队列里只有one的回调，three的回调要等3秒后才会被添加进来。
2. Event Loop的工作逻辑：没错，Event Loop的核心逻辑就是持续检查调用栈状态——只有当调用栈完全为空时，它才会从回调队列的队首取出一个回调函数，推入调用栈执行。每执行完一个回调后，会再次检查调用栈是否为空，再决定是否取下一个回调，这个过程会持续进行，即使后续有新的回调被加入队列（比如3秒后three的回调入队）。

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