JavaScript中的回调函数详解
1.1 概念
1.1.1 什么是回调函数
**回调函数（Callback Function）**是你将一个函数的引用（指针）作为参数传递给另一个函数，在那个函数完成任务后调用回来执行你传递的函数。简单的来说就是回调函数是作为参数传递给另一个函数，目的是让接受它的函数在特定条件满足、异步操作完成或事件发生的时候回调它
1.1.2 关键特征
- 传而不调用的机制
- 你把函数A作为参数传递给B
- 函数B暂时不调用A,而是保存它的引用
- 当指定情况发生的时候，（事件触发/异步操作完成后）,函数B才会调用它
// 经典回调结构
主函数(回调函数); // 传递时不执行function 主函数(cb) {// ...处理某些操作...cb(); // 满足条件时才回调（调用）
}- 回：让代码执行流程回到调用者
- 调：由被调用方决定何时执行
- 函数：传递的是一段可执行的代码逻辑
1.1.2 现实世界的比喻
想想你去饭馆点餐：
- 你点了一份需要时间才能做好的饭菜（启动异步任务）
- 服务员给你一个取餐号（获得回调标识）
- 你去座位上喝茶（继续执行主线程代码）
- 厨师完成菜肴（后台处理完成）
- 服务员喊你的号码：123取餐（触发回调）
- 你凭借着号码牌取餐(执行回调函数处理结果)
整个过程的关键：你不需要等待，系统会在合适的时间通知你
1.2 代码中的三种回调函数形式
2.1 同步回调
// 定义接收回调的函数
function processArray(arr, callback) {const result = [];for (const item of arr) {result.push(callback(item)); // 立即调用！}return result;
}// 使用
const doubled = processArray([1, 2, 3], x => x * 2);
console.log(doubled); // [2, 4, 6]
2.2 异步回调（延迟回呼）
//2.异步回调// 模拟异步任务function fetchData(url,callback){setTimeout(()=>{const data = `从${url}获取的数据`;callback(data)},5000*4);}//使用 fetchData('api/users',data=>{console.log('收到的数据',data)})console.log("请求已发送，继续执行其他任务...")
2.3 事件回调
<Button id = "myButton">点击我</Button>
document.getElementById('myButton').addEventListener('click',()=>{console.log('按钮被点击了!')//当按钮被点击时执行
})
2.3.1 什么是事件回调
回调函数是指：将一个函数作为参数传递给另一个函数，并在特定事件发生或者条件满足时才被调用的函数
在事件处理中：
- 事件发生：用户执行了某些操作（比如点击按钮）
- 系统调用-浏览器自动出发之前“注册”的回调函数
- 执行操作-回调函数中的代码被执行
2.3.2 代码中的回调关系
//结构解析
元素.addEventListener('事件类型',回调函数)//具体实例：
document.getElementById('myButton').addEventListener(
'click' //事件类型
() =>{
console.log('按钮被点击了！') //回调函数
}
)
为什么是“回调”的三个关键点
- 函数作为参数传递
- （）=》{console.log(…)}这个匿名函数作为参数传递给了addEventListener()方法
- 延迟执行
- 这个函数不会立即执行
- 它会一直等待，直到特定事件（这里是点击事件）发生的时候才会被调用
- 反向调用
- 你不是主动调用它
- 而是由浏览器在事件触发时“反回来调用”你注册的函数
类比生活中的回调：
想象你寄快递：
- 你把包裹（回调函数）交给快递员（
addEventListener） - 你告诉快递员：“当收件人签收时（事件发生），请通知我（执行操作）”
- 之后你就去做其他事（代码继续执行）
- 当收件人真正签收时（用户点击按钮），快递员打电话给你（执行回调函数）
2.3.3 回调的核心特点：
| 特点 | 说明 | 代码体现 |
|---|---|---|
| 注册机制 | 需要提前设置好响应事件的函数 | addEventListener |
| 异步性 | 事件何时发生不确定 | 代码注册后不立即执行 |
| 事件驱动 | 由外部事件触发执行 | 等待用户点击操作 |
| 反转控制权 | 由系统调用你的代码 | 浏览器控制函数调用时机 |
在JavaScript中，事件处理基本都是采用这种回调机制，这被称为事件驱动编程（Event-Driven Programming），是Web开发的核心模式之一。
所以叫它"事件回调"，是因为你把一个函数（"叫"它做什么）交给了事件系统，事件系统在特定事件发生后"回过来调用"你给它的函数。
)
