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

Js的回调函数

news 来源：原创 2025/5/11 20:34:04

一、什么是回调函数（Callback）？

回调函数（Callback Function）是指一个函数被作为参数传递给另一个函数，并在特定事件发生或操作完成时执行。

可以通俗地理解为一种“委托”机制。

在JavaScript中，回调函数的应用非常广泛，例如：

异步操作：如定时器、AJAX请求等。

数组方法：如map、filter、reduce等高阶函数。

事件处理：如DOM事件监听。

二、一个简单例子

同步操作的例子：

// 模拟点餐函数
function orderFood(dish, callback) {console.log(`你点了 ${dish}`);// 厨房开始准备食物callback(dish);
}// 模拟厨房准备食物的回调函数
function prepareFood(dish) {console.log(`厨房正在准备 ${dish}`);
}// 用户点餐并委托厨房准备食物
orderFood('汉堡', prepareFood);//输出 你点了 汉堡  厨房正在准备 汉堡

在这个例子中，prepareFood 是一个回调函数，它被传递给 orderFood 函数。当用户点餐后，orderFood 函数调用 prepareFood 函数来通知厨房开始准备食物。

匿名回调函数

// 模拟点餐函数
function orderFood(dish, callback) {console.log(`你点了 ${dish}`);// 厨房开始准备食物callback(dish);
}// 用户点餐并委托厨房准备食物
orderFood('汉堡', function prepareFood(dish) {console.log(`厨房正在准备 ${dish}`);
});//输出 你点了 汉堡  厨房正在准备 汉堡

异步操作例子

假设准备食物需要一些时间，我们可以使用 setTimeout 来模拟异步操作。

// 模拟点餐函数
function orderFood(dish, callback) {console.log(`你点了 ${dish}`);// 模拟厨房准备食物需要2秒setTimeout(function() {callback(dish);}, 2000);
}// 模拟厨房准备食物的回调函数
function prepareFood(dish) {console.log(`厨房正在准备 ${dish}`);
}// 用户点餐并委托厨房准备食物
orderFood('汉堡', prepareFood);//输出 
//你点了 汉堡  
// 等待2秒后
//厨房正在准备 汉堡

在这个例子中，orderFood 函数使用 setTimeout 来模拟厨房准备食物需要2秒的时间。在2秒后，callback(dish) 被调用，即 prepareFood(dish) 被执行。

三、回调函数的特点

1、延迟执行（不会立即执行）

回调函数作为参数传递给一个函数的时候，传递的只是函数的定义并不会立即执行。在某个事件发生或操作完成后才被调用。这使得它们非常适合处理异步操作，如网络请求、文件读取、定时器等。

2、支持闭包

回调函数可以捕获其定义时的上下文（即闭包），这使得它们可以访问外部函数的变量和状态。

function createCounter() {let count = 0;return function() {count++;console.log(count);};
}const counter = createCounter();
counter(); // 输出: 1
counter(); // 输出: 2

四、回调函数中this指向问题

1、this关键字：

一个指针型变量，它指向当前函数的运行环境。即所在函数的调用者。

无论函数原本属于谁，从哪来的，判断this的唯一依据就是此刻函数的执行由那个对象调用的。

2、回调函数的this指向

注意在回调函数调用时this的执行上下文并不是回调函数定义时的那个上下文，而是调用它的函数所在的上下文。

3、解决方法：

以下面代码举例

function createData(callback) {callback();
}var obj = {data: 100,tool: function() {createData(function(n) {console.log(this, 1111);  // window 1111});}
};obj.tool();

1、使用箭头函数

箭头函数不绑定自己的 this，它会捕获其所在上下文的 this 值。

 var obj = {data: 100,tool: function() {createData(() => {console.log(this, 1111);  // obj 1111});}};

2、使用 bind 方法

使用 bind 方法显式地绑定 this。

    var obj = {data: 100,tool: function() {createData(function(n) {console.log(this, 1111);  // obj 1111}.bind(this));}};

3、使用 var self = this

在外部保存 this 的引用。

 var obj = {data: 100,tool: function() {var self = this;createData(function(n) {console.log(self, 1111);  // obj 1111});}};

回调函数中的 this 指向问题通常是因为回调函数在全局作用域中被调用。可以通过以下几种方式解决：

箭头函数：捕获其所在上下文的 this 值。

bind 方法：显式地绑定 this。

var self = this：在外部保存 this 的引用。

选择哪种方法取决于你的具体需求和个人偏好。箭头函数通常是最简洁和推荐的方式。

五、回调函数其他例子

1、异步操作

setTimeout(function() {console.log('3秒后执行');
}, 3000);

在这个例子中，function() { console.log('3秒后执行'); } 就是一个回调函数，在3秒后由 setTimeout 调用。

2、数组方法

const numbers = [1, 2, 3, 4];
const doubled = numbers.map(function(number) {return number * 2;
});
console.log(doubled); // 输出: [2, 4, 6, 8]

这里的 function(number) { return number * 2; } 是一个回调函数，用于对数组中的每个元素进行操作。

3、事件处理

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

推荐博文：JS中的回调函数（callback）_js回调函数-CSDN博客

Js的回调函数

一、什么是回调函数（Callback）？ 回调函数（Callback Function）是指一个函数被作为参数传递给另一个函数，并在特定事件发生或操作完成时执行。可以通俗地理解为一种“委托”机制。在JavaScript中&#xff0…...

编程日记 2025/5/11 20:34:04

FairGuard游戏安全2024年度报告

导读：2024年，国内游戏市场实际销售收入3257.83亿元，同比增长7.53%，游戏用户规模6.74亿人，同比增长0.94%，市场收入与用户规模双双实现突破，迎来了历史新高点。但游戏黑灰产规模也在迅速扩大&…...

编程日记 2025/5/10 23:06:20

ant-design-vue 1.X 通过id获取a-input组件失败

1.ant-design-vue 1.X 问题描述当我在a-form组件中，以v-decorator指令绑定表单组件时，无法根据我设置的verify-code-input获取元素 <a-input type"text" id"verify-code-input" class"paIpt":placeholder"$t(…...

编程日记 2025/5/12 1:58:50

在这个小红书私信通里面进行一个js的爬虫文字发送 async function sendChatMessage(content) {const url https://pro.xiaohongshu.com/api/edith/ads/pro/chat/chatline/msg;const params new URLSearchParams({porch_user_id: 677e116404ee000000000001});const messageD…...

编程日记 2025/5/10 12:57:51

JVM vs JDK vs JRE

JVM是Java虚拟机的缩写， 用于实现Java的一次编译，处处运行。 Java代码写成.class后，由本地的虚拟机运行。 JDK（Java Development Kit）是一个功能齐全的 Java 开发工具包，供开发者使用。 JDK包含了JRE。…...

编程日记 2025/5/11 18:24:16

OpenCV相机标定与3D重建(47)从两幅图像中的一组匹配点恢复相机的姿态（旋转和平移）函数recoverPose()的使用

操作系统：ubuntu22.04 OpenCV版本：OpenCV4.9 IDE:Visual Studio Code 编程语言：C11 算法描述从两幅不同相机拍摄的图像中对应的点恢复相对相机旋转和平移，使用手性检查。返回通过该检查的内点数量。 cv::recoverPose 是 OpenCV…...

编程日记 2025/5/12 17:17:56

代码随想录算法训练营day27

代码随想录算法训练营 —day27 文章目录代码随想录算法训练营前言一、贪心算法理论基础二、455.分发饼干三、376. 摆动序列53. 最大子数组和总结前言今天是算法营的第27天，希望自己能够坚持下来！ 今日任务： ● 贪心算法理论基础 ● 455.…...

编程日记 2025/5/12 17:25:55

基于华为ENSP的OSPF状态机、工作过程、配置保姆级别详解（2）

本篇技术博文摘要 🌟 基于华为enspOSPF状态机、OSPF工作过程、.OSPF基本配置等保姆级别具体详解步骤；精典图示举例说明、注意点及常见报错问题所对应的解决方法引言 📘 在这个快速发展的技术时代，与时俱进是每个IT人的必修课。我…...

编程日记 2025/5/3 4:05:45

【数据结构】链表

目录编辑 1.2链表 1.2.1 链表的特性 1.2.2 单向链表遍历无头单向链表遍历有头单向链表链表尾插法练习 1.2.3 单向链表的函数操作单向链表的特点： 1.2链表链表又称单链表、链式存储结构，用于存储逻辑关系为“一对一”的数据。和顺序表…...

编程日记 2025/5/10 16:01:50

RabbitMQ解决消息积压的方法

目录减少发送mq的消息体内容增加消费者数量批量消费消息临时队列转移监控和预警机制分阶段实施最后还有一个方法就是开启队列的懒加载这篇文章总结一下自己知道的解决消息积压得方法。减少发送mq的消息体内容像我们没有必要知道一个的中间状态，只需…...

编程日记 2025/5/10 5:41:32

机器学习是？

机器学习（Machine Learning）是一门多领域交叉学科，涉及概率论、统计学、逼近论、凸分析、算法复杂度理论等多门学科; 是人工智能（AI）的一个分支，也是AI的核心领域，它专注于开发算法和模型&#…...

编程日记 2025/5/9 5:28:20

jupyter出现“.ipynb appears to have died. It will restart automatically.”解决方法

原因解决方法：更新jupyter的版本 1.打开anaconda prompt 2、更新jupyter版本在anaconda prompt输入以下指令 conda update jupyter如图：...

编程日记 2025/4/23 21:53:47

计算机毕业设计PyHive+Hadoop深圳共享单车预测系统共享单车数据分析可视化大屏共享单车爬虫共享单车数据仓库机器学习深度学习

温馨提示：文末有 CSDN 平台官方提供的学长联系方式的名片！ 温馨提示：文末有 CSDN 平台官方提供的学长联系方式的名片！ 温馨提示：文末有 CSDN 平台官方提供的学长联系方式的名片！ 作者简介：Java领…...

编程日记 2025/5/12 17:10:44

c++开源协程库libgo介绍及使用,srs协程，boost协程 Boost::fiber

https://www.cnblogs.com/qwsdcv/p/9115364.html Boost - 从Coroutine2 到Fiber - 开学五年级了 - 博客园协程就是由程序员控制跑在线程里的“微线程”。它可以由程序员调度，切换协程时代价小(切换根据实现不同，消耗的CPU周期从几十到几百不等)&#x…...

编程日记 2025/5/11 10:08:34

微服务实现高并发秒杀系统，前后端实现

一、前端实现前端项目初始化首先，我们需要创建一个新的 Vue 3 项目。你可以使用 Vue CLI 来快速搭建项目。安装 Vue CLI（如果尚未安装） bash npm install -g vue/cli 创建 Vue 项目 bash vue create seckill-frontend cd seckill-f…...

编程日记 2025/5/11 13:20:25

Eureka缓存机制

一、Eureka的CAP特性 Eureka是一个AP系统，它优先保证可用性（A）和分区容错性（P），而不保证强一致性（C）。这种设计使得Eureka在分布式系统中能够应对各种故障和分区情况，保…...

编程日记 2025/4/30 5:17:55

PHP语言的学习路线

PHP语言的学习路线 PHP（Hypertext Preprocessor）是一种广泛使用的开源服务器端脚本语言，尤其适用于Web开发。由于其易学易用、功能强大，PHP成为了许多动态网站和Web应用程序开发的首选语言。随着Web3.0和云计算的兴起&#xff0c…...

编程日记 2025/5/11 20:58:58

python学opencv|读取图像（二十八）使用cv2.warpAffine（）函数平移图像

【1】引言前序已经对图像操作进行了广泛的学习，包括读取、放大缩小，改变BGR通道值等，相关链接包括且不限于： python学opencv|读取图像-CSDN博客 python学opencv|读取图像（三）放大和缩小图像_python(1)使…...

编程日记 2025/5/11 21:54:47

[Linux]Mysql9.0.1服务端脱机安装配置教程(redhat)

前言本教程适用于在yum源不可用的LInux主机上安装Mysql的场景。以redhat系主机做操作示例，debian系主机可参照步骤，将对应的rpm -ivh命令换成dpkg -i。 1. 官网下载安装包 https://dev.mysql.com/downloads/mysql/ 1.1 版本分类 MySQL Enterprise…...

编程日记 2025/5/9 20:50:52

个人 ALL IN ONE 方案搭建方案分享(从硬件到软件）及内网穿透方案

这里只做大概方案分享，每个虚拟机的部署细节滤过。个人 ALL IN ONE 方案搭建方案分享本指南将详细介绍如何基于现有硬件搭建一体化家庭/个人服务器解决方案，涵盖从软硬件配置、系统安装到功能实现以及性能优化的全过程。实现集软路由、旁路由、NAS 网…...

编程日记 2025/5/10 3:57:42

TrustRAG：增强RAG系统鲁棒性与可信度的创新框架

在人工智能飞速发展的今天，大语言模型（LLMs）凭借其强大的语言处理能力在诸多领域大放异彩。检索增强生成（RAG）系统（面向企业RAG（Retrieval Augmented Generation）系统的多维检索框架…...

编程日记 2025/5/9 18:13:53

使用证件照制作软件的常见问题及解决方案

在数字化时代，证件照的制作变得越来越简单。借助各种证件照制作软件，我们可以轻松在家中制作出符合要求的证件照。然而，用户在使用这些软件时，可能会遇到一些常见问题。为了帮助您顺利制作出满意的证件照，我们整理了一…...

编程日记 2025/5/11 8:04:18

通过gradle发布aar或jar携带sources-jar到maven nexus

找了很久，没有找到满意的。终于找到一个好的办法。 gradle7.x适用。比以前的写法简洁。发布传统的jar工程比如okhttp，fastjson等项目，纯java工程。直接创建新文件publish.gradle: apply plugin: maven-publishProperties properties …...

编程日记 2025/5/12 14:41:24

SAP推出云端ERP解决方案，加速零售行业数字化转型

2025年1月9日，SAP发布了一款专为零售行业设计的云端ERP行业解决方案——S/4HANA Cloud Public Edition，进一步推动企业向云端迁移。这款解决方案旨在集中运营数据，整合财务、采购和商品管理流程，以帮助零售企业优化运营效率。核…...

编程日记 2025/5/11 17:43:58

RK3568 Android 13 内置搜狗输入法小计

问：为什么写？ 答：网上搜出来的都试过了，不行！下面直接上代码和注意事项！ 首先到这个目录（/RK3568/Rockchip_Android13_SDK_Release/device/rockchip/rk356x/tl3568_evm/preinstall&#xff09…...

编程日记 2025/5/9 17:21:03

微服务-Nacos（注册中心）

Nacos Nacos可以看作注册中心配置中心，比Eureka更加强大。注册中心在父工程中引入SpringCloudAlibaba的版本依赖 <dependency><groupId>com.alibaba.cloud</groupId><artifactId>spring-cloud-alibaba-dependencies</artifactId&g…...

编程日记 2025/5/12 9:19:33

【数据结构:前缀树Trie】

目录前言前缀树介绍和应用一、前缀树的定义前缀树的问题和思考前缀树的映射思想前缀树三大性质二.前缀树节点结构三. 前缀树接口介绍和实现四个接口API1. insert(String word)2. search(String word)3. startsWith(String pre)4. delete(String word) API实现1. 查询操作sear…...

编程日记 2025/5/7 5:41:33

如何让QPS提升20倍

一、什么是QPS QPS，全称Queries Per Second，即每秒查询率，是用于衡量信息检索系统（例如搜索引擎或数据库）或请求-响应系统（如Web服务器）每秒能够处理的请求数或查询次数的一个性能指标。以下是…...

编程日记 2025/4/30 22:10:49

时间复杂度简介

定义时间复杂度是用来衡量算法运行时间随着输入规模增长而增长的量级。简单来说，它描述了算法执行时间与数据规模之间的关系。我们通常用大O符号（ O O O）来表示时间复杂度。例如，对于一个简单的加法运算，它的执行时间…...

编程日记 2025/5/10 11:42:51

记一次sealos部署k8s集群之delete了第一台master如何恢复

记一次sealos部署k8s集群之delete了第一台master如何恢复一、背景描述使用sealos部署了一套K8S集群 master信息：172.27.100.1、172.27.100.2、172.27.100.3 node信息：172.27.100.4、172.27.100.5 sealos安装在172.27.100.1节点，根目录下/root/.sealos/文件还在！ [root…...

编程日记 2025/5/12 4:36:04

【json】

JSON JSON是一种轻量级的,按照指定的格式去组织和封装数据的数据交互格式。本质上是一个带有特定格式的字符串(py打印json时认定为str类型) 在各个编程语言中流通的数据格式，负责不同编程语言中的数据传递和交互,类似于计算机普通话 python与json关系及相互转换…...

编程日记 2025/5/6 17:30:09

TypeScript语言的并发编程

TypeScript语言的并发编程引言随着现代应用程序的复杂性不断增加，性能和用户体验的重要性显得尤为突出。在这种背景下，并发编程应运而生，成为提升应用程序效率的重要手段。在JavaScript及其超集TypeScript中，尽管语言本身是单…...

编程日记 2025/5/12 4:04:47

左值引用（Lvalue Reference）和右值引用（Rvalue Reference）详解

左值引用（Lvalue Reference）和右值引用（Rvalue Reference）详解文章目录左值引用（Lvalue Reference）和右值引用（Rvalue Reference）详解1. 什么是左值和右值？左值&#x…...

编程日记 2025/5/6 20:39:57

音视频入门基础：RTP专题（1）——RTP官方文档下载

一、引言实时传输协议（Real-time Transport Protocol，简写RTP）是一个网络传输协议，由IETF的多媒体传输工作小组1996年在《RFC 1889》中公布的。 RTP作为因特网标准在《RFC 3550》有详细说明。而《RFC 3551》详细描述了使用最小…...

编程日记 2025/5/10 2:21:34

【Flutter】使用ScrollController配合EasyRefresh实现列表预加载：在还未滑动到底部时加载下一页数据

需求/背景在我们的业务场景中，列表的加载使用easy_refresh组件： https://pub.dev/packages/easy_refresh 大概效果是往上滑动到一定的offset会触发一个上滑加载，可以触发一些网络请求拉取列表后面的数据来展示。这种模式一般在一页翻完…...

编程日记 2025/5/12 4:06:00

js实现md5加密

要在JavaScript中实现MD5加密并截取特定位置的字符，你可以使用像crypto-js这样的库。首先，你需要确保你的项目中包含了crypto-js库。如果你是在浏览器环境中，可以通过CDN引入；如果是在Node.js环境中，可以通过npm安装。…...

编程日记 2025/5/9 2:03:00

[java基础-集合篇]LinkedList源码粗析

LinkedList 的数据结构实现List、Deque 接口，基于双向链表实现的列表。与基于数组的 ArrayList 不同，基于链表的LinkedList 允许在列表的任何位置快速地插入和删除元素。 Java中LinkedList实现了Deque，它提供了 add, offer, remove, poll, …...

编程日记 2025/5/12 14:42:46

【Rust自学】11.1. 编写和运行测试

喜欢的话别忘了点赞、收藏加关注哦，对接下来的教程有兴趣的可以关注专栏。谢谢喵！(･ω･) 11.1.1. 什么是测试在Rust里一个测试就是一个函数，它被用于验证非测试代码的功能是否和预期一致。在一个测试的函数体里通…...

编程日记 2025/4/29 2:49:35

移动端屏幕分辨率rem,less

谷歌模拟器：能直接看到移动端效果屏幕分辨率右键电脑桌面 ，点击显示设置 PC端是逻辑分辨率，移动端代码也是参考逻辑分辨率网页端宽度和逻辑分辨率尺寸相同手机屏幕尺寸不同，网页宽度均为 100% 所以就需要添加视口标签&#x…...

编程日记 2025/5/7 6:44:55

rk3568 , buildroot , qt ，使用sqlite，动态库，静态库

问题说明： 客户反馈 ，buildroot 系统 ，使用qt 使用sqlite ，有报错，无法使用sqlite. 测试情况说明： 我自己测试，发现， buildroot 自己默认就是使能了 sqlite 的。是否解决说明&…...

编程日记 2025/5/7 20:08:04

web-app uniapp监测屏幕大小的变化对数组一行展示数据作相应处理

web-app uniapp监测屏幕大小的变化对数组一行展示数据作相应处理 1.uni.getSystemInfoSync().screenWidth; 获取屏幕宽度 2.uni.onWindowResize（） 实时监测屏幕宽度变化 3.根据宽度的大小拿到每行要展示的数量itemsPerRow 4.为了确保样式能够根据 items…...

编程日记 2025/5/6 3:30:19

Airflow：TimeSensor感知时间条件

在数据管道工作流中，任务可能需要在特定的时间执行，或者在继续之前等待一定的时间。为了满足这些需求，Apache Airflow提供了TimeSensor，这是一种内置Sensor，可以监控当前时间，并在达到指定时间时触发后续任…...

编程日记 2025/5/11 11:29:48

使用Python和Neo4j驱动程序来实现小规模数据的CSV导入

要将CSV数据导入到Neo4j数据库中，你可以使用Neo4j提供的工具，比如neo4j-admin import命令（适用于大规模数据导入），或者使用Python的Neo4j驱动程序通过Cypher查询逐行插入数据（适用于小规模数据导入&#xf…...

编程日记 2025/5/9 21:59:58

网络安全测评技术与标准

网络安全测评概况网络安全测评是网络信息系统和IT技术产品的安全质量保障。本节主要阐述网络安全测评的概念，给出网络安全测评的发展状况。 18.1.1 网络安全测评概念网络安全测评是指参照一定的标准规范要求，通过一系列的技术和管理方法，获…...

编程日记 2025/5/4 5:00:23

某漫画网站JS逆向反混淆流程分析

文章目录 1. 写在前面1. 接口分析2. 反混淆分析【🏠作者主页】：吴秋霖【💼作者介绍】：擅长爬虫与JS加密逆向分析！Python领域优质创作者、CSDN博客专家、阿里云博客专家、华为云享专家。一路走来长期坚守并致力于Pyth…...

编程日记 2025/5/12 5:58:53

如何获取文件的MIME类型

文章目录 1. 概念介绍2. 方法与类型2.1 使用方法2.2 常见类型3. 示例代码4. 内容总结我们在上一章回中介绍了"如何加载本地图片"相关的内容，本章回中将介绍如何获取文件类型.闲话休提，让我们一起Talk Flutter吧。 1. 概念介绍我们在本章回中提到的文件类型是指MI…...

编程日记 2025/5/12 15:10:18

Three.js 基础概念：构建3D世界的核心要素

文章目录前言一、场景（Scene）二、相机（Camera）三、渲染器（Renderer）四、物体（Object）五、材质（Material）六、几何体（Geometry）七、光…...

编程日记 2025/5/1 23:46:54

Linux web服务器

Linux 作为 Web 服务器操作系统安装 Web 服务器软件（以 Apache 为例） 步骤一：更新系统软件包列表在 CentOS 系统中，使用命令 yum update -y 这个命令会连接到 CentOS 的软件包仓库，检查所有已安装软件包是否有更…...

编程日记 2025/5/7 9:57:25

Linux 下信号的保存和处理

信号的几个状态信号抵达: 当接收到的信号被处理时, 此时就成为信号的抵达信号的未决: 从信号的产生到信号抵达这个时间段之间, 称为信号未决信号阻塞: 当进程设置了某个信号为阻塞后, 这个进程就不会在接收到这个信号信号忽略: 将信号设置为忽略后, 接收到这个信号, 对这个信…...

编程日记 2025/5/10 17:26:10

宝塔安装教程，bt怎么安装 linux

Centos安装脚本 yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh 37a09b35 Ubuntu/Deepin安装脚本 wget -O install.sh http://download.bt.cn/install/install-ubuntu_6.0.sh && sudo b…...

编程日记 2025/5/10 8:33:33