js中回调函数的执行顺序

在 JavaScript 中，回调函数的执行顺序主要取决于两个因素：事件循环（Event Loop）和函数调用栈（Call Stack）。理解这两者是理解回调函数执行顺序的关键。

事件循环（Event Loop）

JavaScript 是单线程执行的，但通过事件循环机制可以处理异步操作。事件循环负责管理调用堆栈和消息队列（Callback Queue），确保适时执行异步任务。

1. 调用堆栈（Call Stack）：

   • JavaScript 引擎使用调用堆栈来管理执行上下文（Execution Context）和函数调用。每次调用函数，会将函数推入调用堆栈，执行完毕后将其弹出。

2. 消息队列（Callback Queue）：

   • 异步操作完成后，会将其回调函数（callback）放入消息队列中。例如，setTimeout 的回调函数就会被放入消息队列。

3. 事件循环工作机制：

   • 当调用堆栈为空时，事件循环会从消息队列中取出一个回调函数，推入调用堆栈执行。这样实现了异步操作的执行。

回调函数执行顺序示例

考虑以下代码示例，展示了不同情况下回调函数的执行顺序：

javascript
复制代码
console.log('Start');

setTimeout(() => {
  console.log('Timeout callback');
}, 0);

Promise.resolve().then(() => {
  console.log('Promise resolved');
});

console.log('End');

执行顺序解释：

1. console.log('Start'); 在调用堆栈中执行，输出 Start。
2. setTimeout 的回调函数被安排在消息队列中，因为设置了时间为 0，所以不会立即执行。
3. Promise.resolve().then(...) 中的回调函数会在微任务队列中排队，等待当前调用堆栈执行完毕。
4. console.log('End'); 输出 End，完成后调用堆栈为空。
5. 事件循环检查消息队列，将 setTimeout 的回调函数推入调用堆栈执行，输出 Timeout callback。
6. 微任务队列中的 Promise 回调函数被执行，输出 Promise resolved。

关键点总结：

• 事件循环（Event Loop） 管理调用堆栈和消息队列，确保 JavaScript 单线程执行异步任务。
• 调用堆栈（Call Stack） 负责当前正在执行的函数和其上下文。
• 消息队列（Callback Queue） 存放异步操作的回调函数。
• 微任务队列（Microtask Queue） 存放 Promise 的回调函数等微任务。

理解事件循环和异步操作的机制，能够帮助你编写高效和响应式的 JavaScript 代码，处理复杂的异步操作流程。