javascript中的回调函数是什么以及如何使用?【教程】

冬杰大大_2638

冬杰大大_2638

2026-01-21

112人浏览

原创

回调函数是将函数作为参数传入并由接收方控制执行时机的机制,常用于异步操作、事件监听和数组方法,需注意this丢失、回调地狱、错误处理及类型校验等问题。

javascript中的回调函数是什么以及如何使用?【教程】

回调函数就是“等别人忙完再执行的函数”

它不是特殊语法,只是把函数当参数传给另一个函数,让后者在合适时机调用它。关键在于“时机由接收方控制”,不是你写完就立刻跑。

常见场景:异步操作(如 fetch、setTimeout)、事件监听(addEventListener)、数组遍历(map、filter)。

  • 传函数时别加括号:doSomething(callback) ✅,doSomething(callback()) ❌(后者是立即执行结果)
  • 回调函数内部 this 容易丢失,尤其在对象方法中被当作参数传出去时
  • 嵌套多层回调(“回调地狱”)会让逻辑难读难维护,现代代码优先用 Promise 或 async/await

怎么写一个接受回调的函数

只要函数内部在某个时刻调用传入的函数参数,它就算支持回调。不需要额外关键字或修饰。

function loadData(url, callback) {
  setTimeout(() => {
    const data = { id: 1, name: 'test' };
    callback(null, data); // 第一个参数习惯留作 error
  }, 100);
}
  • 约定俗成:Node.js 风格回调第一个参数是 error,第二个起是数据;浏览器 API(如 setTimeout)通常不传 error
  • 务必检查回调是否为函数:if (typeof callback === 'function') callback(),避免运行时报 TypeError: callback is not a function
  • 不要假设回调一定同步执行——它可能异步、可能同步,取决于你写的逻辑

常见错误:为什么我的回调没执行?

不是语法报错,而是逻辑静默失败,最容易卡住人。

Java Api Extractor
Java Api Extractor

从 Java 项目中提取 Controller 层接口定义为 JSON 数据。

下载
  • 忘记传回调:调用 loadData('/api') 没给第二个参数 → 后续 callback(...) 直接报错
  • 传了但拼错名:loadData('/api', hander)(少个 l),而变量 hander 是 undefined
  • 异步中用了 let 块级变量,回调里访问时已销毁(少见但真实发生过)
  • 回调里抛错没捕获,导致整个流程中断却不提醒你——加 try/catch 或统一错误处理

和 Promise / async await 的关系

回调不是过时,而是基础。所有 Promise 的 .then()、.catch(),以及 async 函数里的 await,底层都依赖回调机制。

  • new Promise((resolve, reject) => {...}) 里的 resolve 和 reject 就是回调
  • async 函数返回 Promise,本质是把回调链自动展开,避免手动传参嵌套
  • 有些老库只提供回调接口(如早期 MongoDB Driver),你得用 util.promisify 包一层才能 await

真正该警惕的不是回调本身,而是没设计好执行顺序、没处理好错误流向、没约束好参数类型。这些毛病换 Promise 一样存在。

Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南

相关文章

java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习?java怎么入门?java在哪学?java怎么学才快?不用担心,这里为大家提供了java速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
scripterror怎么解决
scripterror怎么解决

scripterror的解决办法有检查语法、文件路径、检查网络连接、浏览器兼容性、使用try-catch语句、使用开发者工具进行调试、更新浏览器和JavaScript库或寻求专业帮助等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2023.10.18

1009

5

500error怎么解决
500error怎么解决

500error的解决办法有检查服务器日志、检查代码、检查服务器配置、更新软件版本、重新启动服务、调试代码和寻求帮助等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2023.10.25

3140

5

硬盘接口类型介绍
硬盘接口类型介绍

硬盘接口类型有IDE、SATA、SCSI、Fibre Channel、USB、eSATA、mSATA、PCIe等等。详细介绍:1、IDE接口是一种并行接口,主要用于连接硬盘和光驱等设备,它主要有两种类型:ATA和ATAPI,IDE接口已经逐渐被SATA接口;2、SATA接口是一种串行接口,相较于IDE接口,它具有更高的传输速度、更低的功耗和更小的体积;3、SCSI接口等等。

2023.10.19

3188

3

PHP接口编写教程
PHP接口编写教程

本专题整合了PHP接口编写教程,阅读专题下面的文章了解更多详细内容。

2025.10.17

5109

12

php8.4实现接口限流的教程
php8.4实现接口限流的教程

PHP8.4本身不内置限流功能,需借助Redis(令牌桶)或Swoole(漏桶)实现;文件锁因I/O瓶颈、无跨机共享、秒级精度等缺陷不适用高并发场景。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2025.12.29

3829

9

java接口相关教程
java接口相关教程

本专题整合了java接口相关内容,阅读专题下面的文章了解更多详细内容。

2026.01.19

466

15

golang map内存释放
golang map内存释放

本专题整合了golang map内存相关教程,阅读专题下面的文章了解更多相关内容。

2025.09.05

650

5

golang map相关教程
golang map相关教程

本专题整合了golang map相关教程,阅读专题下面的文章了解更多详细内容。

2025.11.16

343

7

golang map原理
golang map原理

本专题整合了golang map相关内容,阅读专题下面的文章了解更多详细内容。

2025.11.17

533

20

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
WebStorm 官方调试文档
WebStorm 官方调试文档

共0课时 | 0人学习

React 教程
React 教程

共58课时 | 12.3万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 6.7万人学习