嵌套回调的JavaScript代码执行顺序疑问及底层原理求解

前提说明 #

这个执行顺序成立的核心前提是：doA、doC均为异步函数，二者接收的回调参数会被放到异步任务队列等待执行，典型场景比如定时器、网络请求、DOM事件监听类API。

执行步骤拆解 #

JS运行遵循单线程事件循环机制：主执行栈优先执行所有同步任务，异步任务的回调会被暂存到任务队列，只有主执行栈完全清空后，才会按序执行队列中的回调。基于这个规则，代码的执行流程如下：

1. 主执行栈首先调用doA()，doA本身的同步逻辑执行完成后，会将传入的匿名回调交给异步模块处理，不会等待回调执行
2. 主执行栈继续往后执行，直接调用同步任务doF()，doF执行完成
3. 此时主执行栈已清空，事件循环开始处理异步任务队列，首先执行doA传入的匿名回调：
   • 同步调用doB()，执行完成
   • 调用doC()，doC本身的同步逻辑执行完成后，将内部包含doD()的回调交给异步模块处理，不会等待该回调执行
   • 同步调用doE()，执行完成
4. doA的回调执行完成后，主执行栈再次清空，事件循环处理doC传入的回调，执行doD()

你可以用以下可运行的模拟代码验证顺序：

// 模拟异步doA
function doA(cb) {
  setTimeout(cb, 10)
}
// 模拟异步doC
function doC(cb) {
  setTimeout(cb, 10)
}
function doB() { console.log('doB') }
function doD() { console.log('doD') }
function doE() { console.log('doE') }
function doF() { console.log('doF') }

// 原代码逻辑
doA(function(){
  doB();
  doC(function() {
    doD();
  })
  doE();
});
doF();

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