红宝书第十六讲：通俗详解JavaScript回调函数与事件循环

---

红宝书第十六讲：通俗详解JavaScript回调函数与事件循环

资料取自《JavaScript高级程序设计（第5版）》。
查看总目录：红宝书学习大纲

---

一、回调函数：任务的“代金券”

回调函数是将一个函数作为参数传递给另一个函数，在特定条件满足时自动触发执行的机制。例如：用户点击按钮时触发函数、异步请求完成时处理数据 ¹。

示例：DOM事件回调

// 点击按钮时触发回调函数
const button = document.querySelector('#myButton');
button.addEventListener('click', function() {
  console.log('按钮被点击了！'); 
});

¹: 参考资料3指出Observer API使用回调函数响应DOM变化

---

二、事件循环：JavaScript的“调度中心”

JavaScript是单线程的，通过事件循环（Event Loop） 管理异步任务。其核心流程如下：

1. 执行同步任务（立即执行）
2. 处理异步任务（如定时器、网络请求）
3. 任务队列保存已完成的异步回调
4. 轮询队列，当主线程空闲时按顺序执行回调

flowchart LR
    SyncCode["同步代码"] --> CallStack["调用栈"]
    AsyncTask["异步任务"] --> WebAPI["Web APIs处理"]
    WebAPI --> TaskQueue["完成时放入任务队列"]
    CallStack --> IsEmpty["调用栈是否为空？"]
    IsEmpty -- "是" --> GetCallback["任务队列取回调"]
    GetCallback --> CallStack

关键概念：

• 调用栈（Call Stack）：存放当前执行的函数
• 任务队列（Task Queue）：存放待处理回调（如 setTimeout、fetch 的完成回调）
• 微任务队列（Microtask Queue）：存放 Promise 回调，优先级更高 ²

²: 参考资料6展示异步操作通过Promise链式回调进入微任务队列

---

三、从代码看事件循环

console.log('开始'); // 同步任务 → 立即执行

setTimeout(() => console.log('定时器回调'), 0); // 异步任务 → 宏任务队列

Promise.resolve().then(() => console.log('Promise回调')); // 异步任务 → 微任务队列

console.log('结束'); // 同步任务 → 立即执行

// 输出顺序：
// 开始 → 结束 → Promise回调 → 定时器回调

执行顺序解析：

1. 执行所有同步代码
2. 清空微任务队列（Promise回调优先）
3. 处理宏任务队列（定时器、事件回调）

---

四、回调函数的进阶应用

结合异步操作（如 fetch 请求）处理数据：

// 使用fetch发起异步请求，通过.then()注册回调
fetch('https://api.example.com/data')
  .then(response => response.json()) // 微任务
  .then(data => console.log('数据获取成功:', data))
  .catch(error => console.error('请求失败:', error));

²: 参考资料6演示通过异步回调链式处理分块数据

---

目录：总目录
上篇文章：红宝书第十五讲：详解JavaScript迭代器与生成器：Symbol.iterator与yield

下篇文章：红宝书第十七讲：通俗详解JavaScript的Promise与链式调用

脚注

---

1. 《JavaScript高级程序设计（第5版）》说明DOM变化的回调机制 ↩
2. 《JavaScript高级程序设计（第5版）》展示异步操作的微任务优先级 ↩