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 相关文章推荐
JAVASCRIPT实现的WEB页面跳转以及页面间传值方法
May 13 Javascript
JQuery优缺点分析说明
Jun 09 Javascript
JavaScript 基础篇(一)
Mar 30 Javascript
JS与C#编码解码
Dec 03 Javascript
js中函数调用的两种常用方法使用介绍
Jul 17 Javascript
js动态添加onclick事件可传参数与不传参数
Jul 29 Javascript
基于jQuery+PHP+Mysql实现在线拍照和在线浏览照片
Sep 06 Javascript
基于vue v-for 多层循环嵌套获取行数的方法
Sep 26 Javascript
vue中使用axios post上传头像/图片并实时显示到页面的方法
Sep 27 Javascript
微信小程序中使用Async-await方法异步请求变为同步请求方法
Mar 28 Javascript
vue.js实现照片放大功能
Jun 23 Javascript
详细聊聊浏览器是如何看闭包的
Nov 11 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 intval的测试代码发现问题
2008/07/27 PHP
Eclipse中php插件安装及Xdebug配置的使用详解
2013/04/25 PHP
php计算数组不为空元素个数的方法
2014/01/27 PHP
php上传大文件失败的原因及应对策略
2015/10/20 PHP
jquery $.ajax相关用法分享
2012/03/16 Javascript
利用js实现选项卡的特别效果的实例
2013/03/03 Javascript
js sort 二维数组排序的用法小结
2014/01/24 Javascript
javascript实现html页面之间参数传递的四种方法实例分析
2015/12/15 Javascript
JavaScript如何实现在文本框(密码框)输入提示语
2015/12/25 Javascript
基于javascript实现表格的简单操作
2016/05/21 Javascript
详解jQuery中的DOM操作
2016/12/23 Javascript
React创建组件的三种方式及其区别
2017/01/12 Javascript
JS实现汉字与Unicode码相互转换的方法详解
2017/04/28 Javascript
详解vue-cli本地环境API代理设置和解决跨域
2017/09/05 Javascript
jQuery 实现左右两侧菜单添加、移除功能
2018/01/02 jQuery
详解vue中axios的使用与封装
2019/03/20 Javascript
jstree中的checkbox默认选中和隐藏示例代码
2019/12/29 Javascript
js根据后缀判断文件文件类型的代码
2020/05/09 Javascript
[01:38]完美世界DOTA2联赛(PWL)宣传片:第一站
2020/10/26 DOTA
详解Python中的日志模块logging
2015/06/19 Python
Python selenium文件上传方法汇总
2020/11/19 Python
Python实现将一个正整数分解质因数的方法分析
2017/12/14 Python
Python3 log10()函数简单用法
2019/02/19 Python
python 怎样将dataframe中的字符串日期转化为日期的方法
2019/09/26 Python
python模拟点击玩游戏的实例讲解
2020/11/26 Python
JBL澳大利亚官方商店:扬声器、耳机和音响系统
2018/05/24 全球购物
比驿:全球酒店比价网
2018/06/20 全球购物
世界上第一个水枕头:Mediflow
2018/12/06 全球购物
平面设计的岗位职责
2013/11/08 职场文书
酒店人事专员岗位职责
2013/12/19 职场文书
百度吧主申请感言
2014/01/12 职场文书
青年文明号服务承诺
2014/03/31 职场文书
《狼和小羊》教学反思
2014/04/20 职场文书
软件项目实施计划书
2014/05/02 职场文书
小学生六年级作文之关于感恩
2019/08/16 职场文书
本地通过nginx配置反向代理的全过程记录
2021/03/31 Servers