JS回调函数基本定义与用法实例分析


Posted in Javascript onMay 24, 2017

本文实例讲述了JS回调函数基本定义与用法。分享给大家供大家参考,具体如下:

初学js的时候,被回调函数搞得很晕,现在回过头来总结一下什么是回调函数。

我们先来看看回调的英文定义:A callback is a function that is passed as an argument to another function and is executed after its parent function has completed。

字面上的理解,回调函数就是一个参数,将这个函数作为参数传到另一个函数里面,当那个函数执行完之后,再执行传进去的这个函数。这个过程就叫做回调。

其实也很好理解对吧,回调,回调,就是回头调用的意思。主函数的事先干完,回头再调用传进来的那个函数。但是以前看过很多博客,他们总是将回调函数解释的云里雾里,很高深的样子。

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

现在基本理解回调函数的意思了吧。不理解的话没关系,我们用代码说话。

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

上面的代码中,我们先定义了主函数和回调函数,然后再去调用主函数,将回调函数传进去。

定义主函数的时候,我们让代码先去执行callback()回调函数,但输出结果却是后输出回调函数的内容。这就说明了主函数不用等待回调函数执行完,可以接着执行自己的代码。所以一般回调函数都用在耗时操作上面。比如ajax请求,比如处理文件等。

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

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

Javascript 相关文章推荐
Jquery中删除元素的实现代码
Dec 29 Javascript
jQuery+JSON+jPlayer实现QQ空间音乐查询功能示例
Jun 17 Javascript
JavaScript中Math对象方法使用概述
Jan 02 Javascript
基于Jquery代码实现支持PC端手机端幻灯片代码
Nov 17 Javascript
js判断当前页面在移动设备还是在PC端中打开
Jan 06 Javascript
javascript自动切换焦点控制效果完整实例
Feb 02 Javascript
Bootstrap+jfinal实现省市级联下拉菜单
May 30 Javascript
Vue keepAlive 数据缓存工具实现返回上一个页面浏览的位置
May 10 Javascript
js核心基础之构造函数constructor用法实例分析
May 11 Javascript
原生javascript制作贪吃蛇小游戏的方法分析
Feb 26 Javascript
JavaScript enum枚举类型定义及使用方法
May 15 Javascript
js重写alert事件(避免alert弹框标题出现网址)
Dec 04 Javascript
解决jQuery ajax动态新增节点无法触发点击事件的问题
May 24 #jQuery
详解前后端分离之VueJS前端
May 24 #Javascript
JQuery Ajax 异步操作之动态添加节点功能
May 24 #jQuery
ES6新特性之类(Class)和继承(Extends)相关概念与用法分析
May 24 #Javascript
使用jQuery.Pin垂直滚动时固定导航
May 24 #jQuery
bootstrap table使用入门基本用法
May 24 #Javascript
Vue动态实现评分效果
May 24 #Javascript
You might like
用PHP生成自己的LOG文件
2006/10/09 PHP
php的控制语句
2006/10/09 PHP
用PHP和ACCESS写聊天室(八)
2006/10/09 PHP
php中3des加密代码(完全与.net中的兼容)
2012/08/02 PHP
php查看请求头信息获取远程图片大小的方法分享
2013/12/25 PHP
PHP判断字符串长度的两种方法很实用
2015/09/22 PHP
yii 2.0中表单小部件的使用方法示例
2017/05/23 PHP
php实现和c#一致的DES加密解密实例
2017/07/24 PHP
Laravel框架用户登陆身份验证实现方法详解
2017/09/14 PHP
visual studio code 调试php方法(图文详解)
2017/09/15 PHP
PHP排序算法之希尔排序(Shell Sort)实例分析
2018/04/20 PHP
YII2框架中添加自定义模块的方法实例分析
2020/03/18 PHP
用JQuery 实现的自定义对话框
2007/03/24 Javascript
js查错流程归纳
2012/05/04 Javascript
jQuery代码实现发展历程时间轴特效
2015/07/30 Javascript
详解JavaScript的另类写法
2016/04/11 Javascript
ionic2中使用自动生成器的方法
2018/03/04 Javascript
解决webpack dev-server不能匹配post请求的问题
2018/08/24 Javascript
微信小程序实现图片压缩
2019/12/03 Javascript
js实现随机抽奖
2020/03/19 Javascript
Python开发WebService系列教程之REST,web.py,eurasia,Django
2014/06/30 Python
Python数据库的连接实现方法与注意事项
2016/02/27 Python
python读取二进制mnist实例详解
2017/05/31 Python
pandas 将list切分后存入DataFrame中的实例
2018/07/03 Python
python GUI库图形界面开发之PyQt5动态(可拖动控件大小)布局控件QSplitter详细使用方法与实例
2020/03/06 Python
canvas版人体时钟的实现示例
2021/01/29 HTML / CSS
什么是继承
2013/12/07 面试题
银行服务感言
2014/03/01 职场文书
五一劳动节活动记录
2014/03/23 职场文书
土建专业大学生自荐信范文
2014/04/09 职场文书
个人租房协议书
2014/11/28 职场文书
python实现ROA算子边缘检测算法
2021/04/05 Python
浅析Python中的套接字编程
2021/06/22 Python
NASA 机智号火星直升机拍到了毅力号设备碎片
2022/04/29 数码科技
Linux磁盘管理方法介绍
2022/06/01 Servers
SpringBoot深入分析讲解监听器模式下
2022/07/15 Java/Android