简单理解JS回调函数(callback)

news2024/10/6 16:17:17

一、回调函数到底是什么?

  其实回调函数(没有调用也会执行)就是一个参数,把这个参数传到另一个函数里面,也就是主函数里面,当主函数里面的事情干完再回头去执行当做参数传进去的回调函数,回头去调用,这就是回调的概念。

  举一个别人举过的例子:约会结束后你送你女朋友回家,离别时,你肯定会说:“到家了给我发条信息,我很担心你。” 对不,然后你女朋友回家以后还真给你发了条信息。小伙子,你有戏了。其实这就是一个回调的过程。你留了个参数函数(要求女朋友给你发条信息)给你女朋友,然后你女朋友回家,回家的动作是主函数。她必须先回到家以后,主函数执行完了,再执行传进去的函数,然后你就收到一条信息了。

  接下来我们用代码更清晰的理解一下回调的概念:

<script>
    //定义主函数,回调函数作为参数
    function A(callback) {
        callback();
        console.log('我是主函数');
    }

    //定义回调函数
    function B() {
        setTimeout("console.log('我是回调函数')",2000);//即使此时时间设置为0,也会先输出主函数
    }

    //调用主函数,将B传进去
    A(B);
</script>//输出结果
//输出结果

  从以上代码可以看出,我们先执行的回调函数callback(),但是输出的时候却是后输出回调函数里面的内容,由此可以证实上面的说法,要等到主函数里面的事情干完再回头去执行回调函数。 

二、了解JS的执行机制 

 

  • 先执行执行栈里面的同步任务
  • 异步任务(回调函数)放入任务队列中
  • 同步任务结束,按次执行异步任务,异步任务进入执行栈开始执行

  我们都知道js是单线程的,这种设计模式给我们带来了很多的方便之处,我们不需要考虑各个线程之间的通信,也不需要写很多烧脑的代码,也就是说js的引擎只能一件一件事的去完成和执行相关的操作,所以所有需要执行的事情都像排队一样,等待着被触发和执行,可是如果这样的话,如果在队列中有一件事情需要花费很多的时间,那么后面的任务都将处于一种等待状态,有时甚至会出现浏览器假死现象,例如其中有一件正在执行的一个任务是一个死循环,那么会导致后续其他的任务无法正常执行,所以js在同步机制的缺陷下设计出了异步模式

  在异步执行的模式下,每一个异步的任务都有其自己一个或着多个回调函数,这样当前在执行的异步任务执行完之后,不会马上执行事件队列中的下一项任务,而是执行它的回调函数,而下一项任务也不会等当前这个回调函数执行完,因为它也不能确定当前的回调合适执行完毕,只要引它被触发就会执行,

三、常见的回调函数 

  1、dom事件回调函数(如点击按钮事件的函数)

 

//click方法中是一个函数而不是一个变量
$("#btn").click(function() {
    alert("我是回调函数");
});  
//或者
function click() { 
    alert("我是回调函数");
}

  2、定时器回调函数(如上)

  3、ajax请求回调函数

  4、生命周期回调函数  

           如 onLoad、 start 、update、 lateUpdate、 onDestroy 、onEnable、 onDisable

    (有关生命周期回调函数可以查阅https://www.cnblogs.com/allyh/p/9502918.html)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1083611.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Kelper.js 笔记 python交互

1 加载Kepler 地图 KeplerGl() 1.1 主要参数 height 可选 默认值&#xff1a;400 地图显示的高度 data 数据集 字典&#xff0c;键是数据集的名称 config地图配置字典 1.2 举例 from keplergl import KeplerGlmap_KeplerGl() map_ 默认的位置 1.3 添加自己的图 1.3.1 读…

关键词搜索苏宁商品列表数据,苏宁商品列表数据接口,苏宁API接口

在网页抓取方面&#xff0c;可以使用 Python、Java 等编程语言编写程序&#xff0c;通过模拟 HTTP 请求&#xff0c;获取苏宁网站上的商品页面。在数据提取方面&#xff0c;可以使用正则表达式、XPath 等方式从 HTML 代码中提取出有用的信息。值得注意的是&#xff0c;苏宁网站…

试过GPT-4V后,微软写了个166页的测评报告,业内人士:高级用户必读

一周之前&#xff0c;ChatGPT迎来重大更新&#xff0c;不管是 GPT-4 还是 GPT-3.5 模型&#xff0c;都可以基于图像进行分析和对话。与之对应的&#xff0c;多模态版GPT-4V模型相关文档也一并放出。当时 OpenAI 放出的文档只有18页&#xff0c;很多内容都无从得知&#xff0c;对…

作战仿真试验理论体系研究

源自&#xff1a;装甲兵工程学院学报 作者&#xff1a;徐享忠&#xff0c;杨建东&#xff0c;郭齐胜 “人工智能技术与咨询” 发布 摘要 建立了作战仿真试验的概念框架&#xff0c;以预测论、作战仿真理论和试验理论为基础理论&#xff0c;以仿真试验目标、仿真试验模式、…

Java基于SpringBoot+Vue的汽车租赁系统

1 简介 致远汽车租赁管理方面的任务繁琐,以至于公司每年都在致远汽车租赁管理这方面投入较多的精力却效果甚微,致远汽车租赁系统的目标就是为了能够缓解致远汽车租赁管理工作方面面临的压力,让致远汽车租赁管理方面的工作变得更加高效准确。 文章首发地址 2 技术栈 开发语言…

Kubernetes核心组件Services

1. Kubernetes Service概念 Service是kubernetes最核心的概念&#xff0c;通过创建Service&#xff0c;可以为一组具有相同功能的POD&#xff08;容器&#xff09;应用提供统一的访问入口&#xff0c;并且将请求进行负载分发到后端的各个容器应用上。 在Kubernetes中&#xf…

vue项目打包后使用reverse-sourcemap反编译到源码(详解版)

首先得说一下&#xff0c;vue项目中productionSourceMap这个属性。该属性对应的值为true|false。 当productionSourceMap: true,时&#xff1a;   1、打包后能看到xxxx.js.map文件,map文件够通过反编译看到源码;   2、打包后会导致文件变大(因为多了很多map文件导致的)&…

智慧政务大屏建设方案

智慧政务大屏建设方案是为政府部门提供信息化展示和决策支持的重要工具。下面将提供一个详细的智慧政务大屏建设方案&#xff0c;包括硬件设备、软件平台和功能模块等。 **一、硬件设备** 智慧政务大屏的硬件设备需要满足以下基本要求&#xff1a; 1. 显示屏&#xff1a;选择…

网页游戏的开发流程

网页游戏的开发流程可以根据项目的规模和复杂性而有所不同&#xff0c;但通常包括以下一般步骤&#xff0c;希望对大家有所帮助。北京木奇移动技术有限公司&#xff0c;专业的软件外包开发公司&#xff0c;欢迎交流合作。 1.需求分析&#xff1a; 确定游戏的概念、目标受众和核…

关于信息安全软考的记录5

1、防火墙的概念 为了应对网络威胁&#xff0c;联网的机构或公司将自己的网络与公共的不可信任的网络进行隔离。 网络的安全信息程度和需要保护的对象&#xff0c;人为地划分若干安全区域&#xff0c;这些安全区域有&#xff1a; 公共外部网络&#xff0c;如Intrenet内联网&…

华为云云耀云服务器L实例评测|华为云耀云服务器L实例评测包管理工具安装软件(六)

七、华为云耀云服务器L实例评测包管理工具安装软件&#xff1a; 根据企业级项目架构图所示&#xff0c;本章主要是安装公司企业项目的基本环境LNMP&#xff0c;相关的包管理器Composer、Node、Npm、Yarn安装&#xff0c;评测一下包管理工具安装软件是否存在问题&#xff0c;如果…

【Tomcat】Apache发布两个新版本Tomcat修复多个Bug

Apache 官网发布了两个最新的 Tomcat 版本包&#xff0c;分别是&#xff1a;8.5.94、9.0.81 这两个最新版本修复了多个漏洞&#xff0c;统计信息如下表所示。有关漏洞的详细信息&#xff0c;请查阅官方相关文档&#xff08;见&#xff1a;参考&#xff09;。 严重等级漏洞说明…

Premiere Elements 2024(PR简化版)直装版

Adobe Premiere Elements 2024 是一款由Adobe Systems推出的视频编辑软件&#xff0c;它结合了易用性和专业级的功能&#xff0c;帮助用户对视频进行剪辑、特效、色彩校正等处理。 主要功能和特点&#xff1a; 导入和组织视频&#xff1a;Premiere Elements 2024允许用户快速导…

安装CentOS7.9操作系统

下面是安装CentOS7.9操作系统的步骤&#xff1a; 下载CentOS7.9镜像文件&#xff0c;可以到CentOS官网或者其他镜像站点下载。 创建一个可用的安装媒介&#xff0c;可以使用USB或者DVD。 插入安装媒介&#xff0c;启动计算机&#xff0c;进入BIOS设置&#xff0c;选择从外部设…

数据仓库Hive(林子雨课程慕课)

文章目录 9.数据仓库Hive9.1 数据仓库的概念9.2 Hive简介9.3 SQL语句转换为MapReduce作业的基本原理9.4 Impla9.4.1 Impala简介9.4.2 Impala系统架构9.4.3 Impala查询执行过程9.4.4 Impala与Hive的比较 9.5 Hive的安装和基本操作9.5.1 Hive安装9.5.2 Hive基本操作 9.数据仓库Hi…

STM32F407ZGT6移植AD7606

昨天调试的时候在STM32F103VCT6程序一切正常。但是将代码移植到STM32F407ZGT6时出现问题。 不能正常读取结果&#xff0c;会出现4996的错误信号而且经常出现&#xff0c;正确信号的值也不对乘2才能对上。 总结原因。 将AD7606_read_data里的延时参数修改为3、4、4问题解决。

PanoFlow:学习360°用于周围时间理解的光流

1.摘要&#xff1a; 光流估计是自动驾驶和机器人系统中的一项基本任务&#xff0c;它能够在时间上解释交通场景。自动驾驶汽车显然受益于360提供的超宽视野&#xff08;FoV&#xff09;◦ 全景传感器。 然而&#xff0c;由于全景相机独特的成像过程&#xff0c;为针孔图像设计…

SpringBoot+Vue前后端文件传输问题总结

SpringBootVue前后端文件传输问题总结 一、文件上传功能前端&#xff1a;文件上传1.File2.FormData&#xff08;常用&#xff09;3.Blob4.ArrayBuffer5.Base64 后端&#xff1a;文件接收1.MultipartFile 二、文件下载功能后端&#xff1a;文件传输前端&#xff1a;文件接收1.设…

动捕设备在动画影视制作中的应用

随着科技的发展&#xff0c;动画影视作品中的CG角色越来越逼真、生动形象&#xff0c;而这些CG角色大多背后是通过真人穿戴动捕设备&#xff0c;从而捕捉真人演员的肢体动作而创建的&#xff0c;如《遮天》作为国内首部全流程虚幻引擎5动画&#xff0c;结合动捕设备实现真人化动…