JS回调函数 callback的理解与使用案例分析


Posted in Javascript onSeptember 09, 2019

本文实例讲述了JS回调函数 callback的理解与使用。分享给大家供大家参考,具体如下:

基本理解一个概念

回调函数回头再调用函数,等主干事情干完了,再回头干分支上的事情。

官方定义

A callback is a function that is passed as an argument to another function and is executed after its parent function has completed.

实例1

//定义主函数,回调函数作为参数
function A(callback) {
  callback();
  console.log('我是主函数');
}
//定义回调函数
function B(){
  setTimeout("console.log('我是回调函数')", 3000);//模仿耗时操作
}
//调用主函数,将函数B传进去
A(B);

输出结果:

我是主函数
我是回调函数

实例2

function a() {
  console.log("执行a函数");
  setTimeout(function(){
      console.log("执行a函数的延迟函数");
  },1000);
  function b() {
    console.log("执行函数b");
  );
  a();
  b();
};

输出结果

以上代码会先执行函数a,而且不会等到a中的延迟函数执行完才执行函数b, 在延迟函数被触发的过程中就执行了函数b,当js引擎的event 队列空闲时才会去执行队列里等待的setTimeout的回调函数,这就是一个异步的例子

调用 setTimeout 函数会在一个时间段过去后在队列中添加一个消息。这个时间段作为函数的第二个参数被传入。如果队列中没有其它消息,消息会被马上处理。但是,如果有其它消息,setTimeout 消息必须等待其它消息处理完。因此第二个参数仅仅表示最少的时间 而非确切的时间

所以即使,时间设置为0,也是会照样先执行函数b

结语

回调函数广泛运用在同步(sync)和异步(async)

常见的:

还需要深挖:js单线程和js异步

浏览器常驻三大线程: js引擎线程,GUI渲染线程,浏览器事件触发线程

更多关于JavaScript相关内容可查看本站专题:《JavaScript常用函数技巧汇总》、《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
jQuery 锚点跳转滚动条平滑滚动一句话代码
Apr 30 Javascript
js 上传图片预览问题
Dec 06 Javascript
javascript中用星号表示预录入内容的实现代码
Jan 08 Javascript
编写针对IE的JS代码两种编写方法
Jan 30 Javascript
jQuery+CSS 半开折叠效果原理及代码(自写)
Mar 04 Javascript
利用js实现禁止复制文本信息
Jun 03 Javascript
基于jquery实现一个滚动的分步注册向导-附源码
Aug 26 Javascript
AngularJS 表达式详细讲解及实例代码
Jul 26 Javascript
JS/jQuery判断DOM节点是否存在的简单方法
Nov 24 Javascript
Vue.set() this.$set()引发的视图更新思考及注意事项
Aug 30 Javascript
浅谈JavaScript面向对象--继承
Mar 20 Javascript
微信小程序云开发之使用云数据库
May 17 Javascript
世界上最短的数字判断js代码
Sep 09 #Javascript
JavaScript中判断为整数的多种方式及保留两位小数的方法
Sep 09 #Javascript
javascript删除数组元素的七个方法示例
Sep 09 #Javascript
微信小程序 select 下拉框组件功能
Sep 09 #Javascript
移动端手指操控左右滑动的菜单
Sep 08 #Javascript
swiper Scrollbar滚动条组件详解
Sep 08 #Javascript
js实现移动端tab切换时下划线滑动效果
Sep 08 #Javascript
You might like
mysql中存储过程、函数的一些问题
2007/02/14 PHP
解析mysql left( right ) join使用on与where筛选的差异
2013/06/18 PHP
yii实现图片上传及缩略图生成的方法
2014/12/04 PHP
朋友网关于QQ相关的PHP代码(研究QQ的绝佳资料)
2015/01/26 PHP
Laravel 的数据库迁移的方法
2017/07/31 PHP
PHP接口类(interface)的定义、特点和应用示例
2020/05/18 PHP
3款实用的在线JS代码工具(国外)
2012/03/15 Javascript
Javascript数组的排序 sort()方法和reverse()方法
2012/06/04 Javascript
Node.js和MongoDB实现简单日志分析系统
2015/04/25 Javascript
EasyUi中的Combogrid 实现分页和动态搜索远程数据
2016/04/01 Javascript
javascript运算符——位运算符全面介绍
2016/07/14 Javascript
多个上传文件用js验证文件的格式和大小的方法(推荐)
2017/03/09 Javascript
jQuery滑动到底部加载下一页数据的实例代码
2017/05/22 jQuery
基于iScroll实现下拉刷新和上滑加载效果
2017/07/18 Javascript
Angular使用操作事件指令ng-click传多个参数示例
2018/03/27 Javascript
javascript自定义右键菜单插件
2019/12/16 Javascript
js实现3D旋转相册
2020/08/02 Javascript
[01:08:30]DOTA2-DPC中国联赛 正赛 Ehome vs Elephant BO3 第一场 2月28日
2021/03/11 DOTA
python smtplib模块发送SSL/TLS安全邮件实例
2015/04/08 Python
python实现的多线程端口扫描功能示例
2017/01/21 Python
Python实现的朴素贝叶斯分类器示例
2018/01/06 Python
Numpy中np.max的用法及np.maximum区别
2020/11/27 Python
HTML5移动端开发中的Viewport标签及相关CSS用法解析
2016/04/15 HTML / CSS
英国最大的独立玩具专卖店:The Entertainer
2019/09/06 全球购物
JD Sports澳洲官网:英国领先的运动鞋和运动时尚零售商
2020/02/15 全球购物
Flesh Beauty官网:露华浓集团旗下彩妆品牌
2021/02/15 全球购物
电大本科自我鉴定
2014/02/05 职场文书
专科应届毕业生求职信
2014/06/04 职场文书
寝室长工作失责检讨书
2014/10/06 职场文书
党员群众路线学习心得体会
2014/11/04 职场文书
红色故事汇观后感
2015/06/18 职场文书
2017年寒假社区服务活动总结
2016/04/06 职场文书
Canvas跟随鼠标炫彩小球的实现
2021/04/11 Javascript
python脚本框架webpy模板赋值实现
2021/11/20 Python
教你部署vue项目到docker
2022/04/05 Vue.js
利用 Python 的 Pandas和 NumPy 库来清理数据
2022/04/13 Python