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

# Js 回调函数

news 2025/12/22 6:35:30

Js 回调函数

文章目录

  • Js 回调函数
    • 回调函数的定义和使用
    • 回调函数的常见用途
      • 异步操作
      • 事件处理
    • 回调函数的优点和缺点
      • 优点
      • 缺点
    • 回调地狱
    • 解决回调地狱的方法
      • 使用 Promise
      • 使用 async/await
    • 应用
      • 函数式编程中的回调函数
        • 高阶函数
        • 函数柯里化
      • 异步编程中的回调函数
      • 回调函数的错误处理
        • 传递错误参数
        • 使用 Promise 和`async/await`

回调函数是一种作为参数传递给另一个函数的函数，它在特定的事件发生或某个操作完成后被调用。

回调函数的定义和使用

  • sayHellow函数接收一个回调函数作为参数。在函数内部执行一些操作后，调用了传递进来的回调函数。
<!DOCTYPE html>
<button onclick="test1()">回调函数测试</button>
<html>
<body><script type="text/javascript">function sayHellow(msg, callback) {alert(msg)if (typeof callback === "function") {callback(msg);}}function one(msg) {alert("回调函数执行结果：" + msg)}function test1() {sayHellow('你好张三', one);sayHellow('你好李四', function () {alert('匿名函数实现回调')})}</script>
</body>
</html>

回调函数的常见用途

异步操作

  • 在 JavaScript 中，很多操作是异步的，比如网络请求、文件读取等。
  • 回调函数在处理异步操作时非常有用。例如，使用XMLHttpRequest进行网络请求时，可以在请求完成后调用回调函数来处理响应数据。

事件处理

  • 在处理用户交互事件（如点击按钮、鼠标移动等）时，回调函数可以在事件发生时执行相应的操作。

  • 例如，给一个按钮添加点击事件监听器，当按钮被点击时，回调函数会被调用。

document.getElementById('myButton').addEventListener('click', function() {console.log('按钮被点击了！');
});

回调函数的优点和缺点

优点

  • 灵活性：可以根据不同的需求传递不同的回调函数，实现不同的行为。
  • 异步处理：非常适合处理异步操作，确保在操作完成后执行特定的逻辑。

缺点

  • 回调地狱：当多个异步操作依赖于彼此的结果时，可能会导致回调函数嵌套过多，使代码难以阅读和维护。
  • 错误处理困难：在复杂的回调函数链中，错误处理可能变得复杂。

回调地狱

  • 当多个异步操作依赖于彼此的结果时，可能会导致回调函数嵌套过多，形成所谓的"回调地狱"
doSomethingAsync(function() {doAnotherAsyncThing(function() {doYetAnotherAsyncThing(function() {// 更多嵌套...});});
});

解决回调地狱的方法

使用 Promise

  • Promise 是一种用于处理异步操作的对象，它可以避免回调地狱，并提供了一种更清晰的方式来处理异步代码。
  • 例如，可以使用then方法链式调用多个异步操作，每个操作返回一个 Promise。
function doSomethingAsync() {return new Promise(function(resolve, reject) {setTimeout(function() {console.log('异步操作 1 完成');resolve();}, 1000);});
}function doAnotherAsyncThing() {return new Promise(function(resolve, reject) {setTimeout(function() {console.log('异步操作 2 完成');resolve();}, 1000);});
}// 使用 then 方法调用链
doSomethingAsync().then(doAnotherAsyncThing).then(function() {console.log('所有异步操作完成');});

使用 async/await

  • async/await是基于 Promise 的语法糖，它使异步代码看起来更像同步代码，更加易读和易于维护。
  • 例如，可以使用async函数和await关键字来等待异步操作完成。
async function performAsyncOperations() {// 等到 doSomethingAsync() 方法执行结束再执行后面的await doSomethingAsync();// 等 doAnotherAsyncThing() 执行完成后再执行后面的 await doAnotherAsyncThing();console.log('所有异步操作完成');
}performAsyncOperations();

应用

函数式编程中的回调函数

高阶函数
  • 数组的map、filter和reduce等方法都是高阶函数，它们接收一个回调函数作为参数，用于对数组中的每个元素进行操作。
const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers.map(function(number) {return number * 2;});
console.log(doubledNumbers); // [2, 4, 6, 8, 10]
  • map方法接收一个回调函数作为参数，该回调函数将数组中的每个元素乘以2，并返回一个新的数组。
函数柯里化
  • add函数接收一个参数a，并返回一个新的函数，该函数接收参数b并返回a + b的值。回调函数在这里被用于延迟计算，直到所有的参数都被提供。
<!DOCTYPE html>
</html>
<script>function add(a) {return function (b) {return a + b;};}const addOne = add(5);console.log(addOne(3)); // 8
</script>

异步编程中的回调函数

  • async和await是 ES2017 引入的语法糖，用于简化异步操作的处理。

回调函数的错误处理

传递错误参数
  • 回调函数通常接收一个错误参数作为第一个参数，用于在发生错误时通知调用者。如果没有错误发生，这个参数通常为null。
  • 例如，下面的代码展示了如何在异步操作中处理错误：
function asyncOperation(callback) {setTimeout(function() {const error = null;const result = 'success';// 返回错误callback(error, result);}, 1000);
}asyncOperation(function(err, result) {if (err) {console.error(err);} else {console.log(result);}
});
  • asyncOperation函数模拟了一个异步操作，在操作完成时调用回调函数，并传递一个错误参数和一个结果参数。调用者可以根据错误参数的值来决定如何处理结果。
使用 Promise 和async/await
  • Promise 和async/await提供了一种更简洁的方式来处理错误。
  • 在 Promise 中，可以使用catch方法来处理拒绝的 Promise，在async/await中，可以使用try/catch块来捕获异步操作中的错误。
// 返回 promise 
function asyncOperation() {return new Promise((resolve, reject) => {setTimeout(() => {const error = null;const result = 'success';if (error) {reject(error);} else {resolve(result);}}, 1000);});
}async function executeAsyncOperation() {try {// 等待 asyncOperation 返回结果const result = await asyncOperation();console.log(result);} catch (err) {console.error(err);}
}// 调用 executeAsyncOperation()
executeAsyncOperation();
  • asyncOperation函数返回一个 Promise，在异步操作完成时，根据是否有错误来决定是 resolve 还是 reject 这个 Promise。
  • 在executeAsyncOperation函数中，使用async/await来调用asyncOperation函数，并使用try/catch块来捕获可能发生的错误。

相关文章：

# Js 回调函数

Js 回调函数 文章目录 Js 回调函数回调函数的定义和使用回调函数的常见用途异步操作事件处理 回调函数的优点和缺点优点缺点 回调地狱解决回调地狱的方法使用 Promise使用 async/await 应用函数式编程中的回调函数高阶函数函数柯里化 异步编程中的回调函数回调函数的错误处理传…...

编程日记 2024/10/22 3:04:23

COOLSHELL文章：从Code Review 谈如何做技术【阅读笔记】

从Code Review 谈如何做技术原文链接&#xff1a;https://coolshell.cn/articles/11432.html#google_vignette 工程师需要有责任心和修养&#xff0c;不是做出来就了事&#xff0c;而是要做漂亮。 这也是山寨和工业的区别&#xff0c;只以做出来为标准是劳动密集型的装配生产线…...

编程日记 2024/10/22 3:03:22

3.1.1 ReactOS系统中二叉树创建一个MEMORY_AREA节点

二叉树中创建一个MEMORY_AREA节点&#xff1a; 二叉树中创建一个MEMORY_AREA节点&#xff1a; MmCreateMemoryArea() 参数AddressSpace是MADDRESS SPACE结构指针&#xff0c;所指向的数据结构代表着一个进程的用 户空间。 参数BaseAddress是个指针&#xff0c;用来给定和返回内…...

编程日记 2024/10/22 3:01:18

三、Linux 安装全攻略

Linux 安装全攻略 在当今的科技时代&#xff0c;Linux 操作系统以其稳定性、安全性和高度的可定制性而备受青睐。本文将详细介绍 Linux 的安装过程&#xff0c;包括关键步骤和下载资源获取方式&#xff0c;帮助你顺利踏上 Linux 之旅。 一、为什么选择 Linux Linux 有许多优…...

编程日记 2024/10/22 3:00:16

Ansible自动化工具

一、Ansible概述 1.1 什么是Ansible Ansible 是一个开源的自动化工具&#xff0c;用于配置管理、应用程序部署和任务自动化。它让你可以通过编写简单的 YAML 文件&#xff08;剧本&#xff0c;Playbooks&#xff09;&#xff0c;轻松管理和配置多个服务器。Ansible 的特点是无…...

编程日记 2024/10/22 2:59:15

Flutter Container组件

Over the past few years, I’ve been fortunate to collaborate with interior designers, and there’s a distinct flair to their approach to crafting captivating interiors. It’s not just about arranging furniture randomly; they meticulously plan layouts, sele…...

编程日记 2024/10/22 2:57:12

IPv6 DNS简介

IPv6网络中的每台主机都是由IPv6地址来标识的&#xff0c;用户只有获得待访问主机的IPv6地址&#xff0c;才能够成功实现访问操作。对于用户来讲&#xff0c;记住主机的IPv6地址是相当困难的&#xff0c;因此设计了一种字符串形式的主机命名机制&#xff0c;这就是域名系统。用…...

编程日记 2024/10/22 2:56:11

【Python-AI篇】数据结构和算法

1. 算法概念 1.1 什么是数据结构 存储&#xff0c;组织数据的方式 1.2 什么是算法 实现业务目的的各种方法和思路算法是独立的存在&#xff0c;只是思想&#xff0c;不依附于代码和程序&#xff0c;可以使用不同语言实现&#xff08;java&#xff0c;python&#xff0c;c&a…...

编程日记 2024/10/22 2:54:10

VideoCLIP-XL：推进视频CLIP模型对长描述的理解

摘要 对比语言-图像预训练&#xff08;CLIP&#xff09;已被广泛研究并应用于众多领域。然而&#xff0c;预训练过程中对简短摘要文本的重视阻碍了CLIP理解长描述的能力。在视频方面&#xff0c;这个问题尤为严重&#xff0c;因为视频通常包含大量详细内容。在本文中&#xff…...

编程日记 2024/10/22 2:52:07

【vue】vue-router_ vue3路由管理器

代码获取 vue-router_ vue3路由管理器 ⼀、基本介绍 1. 单⻚应⽤程序介绍 1.1 概念 单⻚应⽤程序&#xff1a;SPA(Single Page Application)是指所有的功能都在⼀个HTML⻚⾯上实现 1.2 具体⽰例 单⻚应⽤⽹站&#xff1a; ⽹易云⾳乐 https://music.163.com/ 多⻚应⽤⽹…...

编程日记 2024/10/22 2:51:06

昇思MindSpore进阶教程--Diffusion扩散模型(上)

大家好&#xff0c;我是刘明&#xff0c;明志科技创始人&#xff0c;华为昇思MindSpore布道师。 技术上主攻前端开发、鸿蒙开发和AI算法研究。 努力为大家带来持续的技术分享&#xff0c;如果你也喜欢我的文章&#xff0c;就点个关注吧 正文 关于扩散模型&#xff08;Diffusi…...

编程日记 2024/10/22 2:50:02

Nginx：proxy_pass指令

proxy_pass 指令在 Nginx 中是实现反向代理和负载均衡的重要指令。 一. 反向代理 在反向代理的场景下&#xff0c;proxy_pass 指令用于将接收到的请求转发给另一个后端服务器。后端服务器地址可以是 IP 地址加端口、域名加端口、或者一个完整的 URL。 注意事项 proxy_pass …...

编程日记 2024/10/22 2:47:59

【AI学习】Mamba学习（十）：HiPPO总结

前面用五篇文章陆续学了HiPPO框架。 这里再进行一下总结。 总结 HiPPO&#xff0c;高阶多项式投影&#xff0c;high-order polynomial projection operators 为了解决从序列数据中建模和学习的问题&#xff0c;尤其是长序列&#xff0c;十万甚至百万长度的序列&#xff0c;使…...

编程日记 2024/10/22 2:44:57

AI编程新纪元：Cursor与V0引领的技术变革

#1024程序员节 | 征文# AI编程新纪元&#xff1a;Cursor与V0引领的技术变革 作为一名SAP业务顾问&#xff0c;虽然我懂一些ABAP开发&#xff0c;但是我对于前后端开发是完全不懂的&#xff0c;我一直对前后端开发怀有浓厚兴趣&#xff0c;总想着自己能开发出一些好玩的东西&…...

编程日记 2024/10/22 2:43:56

python——类

问&#xff1a;小编为什么突然开始发python&#xff1f;难道C语言你不行了&#xff1f; 废话少说&#xff0c;让我们进入python中的类的学习&#xff01;&#xff01; &#xff08;一&#xff09;基本知识 &#xff08;1&#xff09;掌握类的概念 1、类的定义&#xff1a; 即…...

编程日记 2024/10/22 2:41:54

走廊泼水节——求维持最小生成树的完全图的最小边权和

题目 思考 代码 #include <bits/stdc.h> using namespace std; const int N 6010; const int M N; int p[N], sz[N]; struct edge{int a;int b;int c;bool operator < (const edge& v) const{return c < v.c;} }e[M]; int find(int x) {if(p[x] ! x) p[x] …...

编程日记 2024/10/22 2:40:53

LC：动态规划-买卖股票

文章目录 121. 买卖股票的最佳时机122. 买卖股票的最佳时机 II714. 买卖股票的最佳时机含手续费309. 买卖股票的最佳时机含冷冻期 121. 买卖股票的最佳时机 链接&#xff1a;https://leetcode.cn/problems/best-time-to-buy-and-sell-stock/description/ 使用贪心&#xff0c…...

编程日记 2024/10/22 2:37:51

FLINK SQL 任务参数

在Flink SQL任务中&#xff0c;参数配置对于任务的性能和稳定性至关重要。以下是对运行时参数、优化器参数和表参数的详细解析&#xff1a; 一、运行时参数 运行时参数主要影响Flink作业在执行过程中的行为。以下是一些关键的运行时参数&#xff1a; 并行度&#xff08;Para…...

编程日记 2024/10/22 2:36:50

HCIP——以太网交换安全（四）DHCP Snooping

目录 一、DHCP Snooping的知识点 二、DHCP Snooping实验拓扑 三、总结 一、DHCP Snooping的知识点 1.1、DHCP snooping 概述&#xff1a; ①DHCP Snooping使能DHCP的一种安全特性&#xff0c;用于保证DHCP客户端从合法的DHCP服务端获取IP地址。DHCP服务器记录DHCP客户端IP…...

编程日记 2024/10/22 2:35:48

k8s worker 节点关机 sts 管理的 pod 无法迁移

背景 1.28.2 版本 k8s 中的一台 worker 节点内存异常&#xff0c;需要关机换内存&#xff0c;正好可以测试一下 pod 的迁移。 发现 deployment 管理的 pod 是能够重新创建飘到其他节点上的&#xff0c;但是 statefulset 管理的 pod 一直处于 Terminating 状态无法迁移&#…...

编程日记 2024/10/22 2:34:47

【大模型RAG】拍照搜题技术架构速览：三层管道、两级检索、兜底大模型

摘要 拍照搜题系统采用“三层管道&#xff08;多模态 OCR → 语义检索 → 答案渲染&#xff09;、两级检索&#xff08;倒排 BM25 向量 HNSW&#xff09;并以大语言模型兜底”的整体框架&#xff1a; 多模态 OCR 层 将题目图片经过超分、去噪、倾斜校正后&#xff0c;分别用…...

编程新知 2025/12/20 22:21:06

springboot 百货中心供应链管理系统小程序

一、前言 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;百货中心供应链管理系统被用户普遍使用&#xff0c;为方…...

编程新知 2025/12/21 23:06:51

【入坑系列】TiDB 强制索引在不同库下不生效问题

文章目录 背景SQL 优化情况线上SQL运行情况分析怀疑1：执行计划绑定问题？尝试：SHOW WARNINGS 查看警告探索 TiDB 的 USE_INDEX 写法Hint 不生效问题排查解决参考背景 项目中使用 TiDB 数据库，并对 SQL 进行优化了，添加了强制索引。 UAT 环境已经生效，但 PROD 环境强制索…...

编程新知 2025/12/20 2:56:30

java 实现excel文件转pdf | 无水印 | 无限制

文章目录 目录 文章目录 前言 1.项目远程仓库配置 2.pom文件引入相关依赖 3.代码破解 二、Excel转PDF 1.代码实现 2.Aspose.License.xml 授权文件 总结 前言 java处理excel转pdf一直没找到什么好用的免费jar包工具，自己手写的难度，恐怕高级程序员花费一年的事件，也…...

编程新知 2025/11/5 4:10:42

【项目实战】通过多模态+LangGraph实现PPT生成助手

PPT自动生成系统 基于LangGraph的PPT自动生成系统&#xff0c;可以将Markdown文档自动转换为PPT演示文稿。 功能特点 Markdown解析&#xff1a;自动解析Markdown文档结构PPT模板分析&#xff1a;分析PPT模板的布局和风格智能布局决策&#xff1a;匹配内容与合适的PPT布局自动…...

编程新知 2025/12/21 6:19:53

c#开发AI模型对话

AI模型 前面已经介绍了一般AI模型本地部署&#xff0c;直接调用现成的模型数据。这里主要讲述讲接口集成到我们自己的程序中使用方式。 微软提供了ML.NET来开发和使用AI模型&#xff0c;但是目前国内可能使用不多&#xff0c;至少实践例子很少看见。开发训练模型就不介绍了&am…...

编程新知 2025/12/17 4:32:25

Web后端基础(基础知识)

BS架构&#xff1a;Browser/Server&#xff0c;浏览器/服务器架构模式。客户端只需要浏览器&#xff0c;应用程序的逻辑和数据都存储在服务端。 优点&#xff1a;维护方便缺点&#xff1a;体验一般 CS架构&#xff1a;Client/Server&#xff0c;客户端/服务器架构模式。需要单独…...

编程新知 2025/12/21 2:09:12

解析奥地利 XARION激光超声检测系统：无膜光学麦克风 + 无耦合剂的技术协同优势及多元应用

在工业制造领域&#xff0c;无损检测&#xff08;NDT)的精度与效率直接影响产品质量与生产安全。奥地利 XARION开发的激光超声精密检测系统&#xff0c;以非接触式光学麦克风技术为核心&#xff0c;打破传统检测瓶颈&#xff0c;为半导体、航空航天、汽车制造等行业提供了高灵敏…...

编程新知 2025/12/21 0:15:10

【p2p、分布式，区块链笔记 MESH】Bluetooth蓝牙通信 BLE Mesh协议的拓扑结构 定向转发机制

目录 节点的功能承载层&#xff08;GATT/Adv&#xff09;局限性&#xff1a; 拓扑关系定向转发机制定向转发意义 CG 节点的功能 节点的功能由节点支持的特性和功能决定。所有节点都能够发送和接收网格消息。节点还可以选择支持一个或多个附加功能&#xff0c;如 Configuration …...

编程新知 2025/12/20 22:55:25

二维FDTD算法仿真

二维FDTD算法仿真&#xff0c;并带完全匹配层&#xff0c;输入波形为高斯波、平面波 FDTD_二维/FDTD.zip , 6075 FDTD_二维/FDTD_31.m , 1029 FDTD_二维/FDTD_32.m , 2806 FDTD_二维/FDTD_33.m , 3782 FDTD_二维/FDTD_34.m , 4182 FDTD_二维/FDTD_35.m , 4793...

编程新知 2025/9/10 21:14:06