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

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

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

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

示例：DOM事件回调

javascript 复制代码

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

^[1](#1: 参考资料3指出Observer API使用回调函数响应DOM变化 "#user-content-fn-3")^: 参考资料3指出Observer API使用回调函数响应DOM变化

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

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

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

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 回调，优先级更高 ^2^

^[2](#2: 参考资料6展示异步操作通过Promise链式回调进入微任务队列 "#user-content-fn-6")^: 参考资料6展示异步操作通过Promise链式回调进入微任务队列

三、从代码看事件循环

javascript 复制代码

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

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

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

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

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

执行顺序解析：

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

四、回调函数的进阶应用

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

javascript 复制代码

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

^[2](#2: 参考资料6演示通过异步回调链式处理分块数据 "#user-content-fn-6")^: 参考资料6演示通过异步回调链式处理分块数据

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

脚注

Footnotes

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

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