当前位置：首页 > news >正文

JavaScript中的回调函数详解

news 来源：原创 2025/6/30 8:23:30

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`
异步性	事件何时发生不确定	代码注册后不立即执行
事件驱动	由外部事件触发执行	等待用户点击操作
反转控制权	由系统调用你的代码	浏览器控制函数调用时机