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 四则运算精度修正函数代码
May 31 Javascript
一个可以增加和删除行的table并可编辑表格中内容
Jun 16 Javascript
jQuery Mobile弹出窗、弹出层知识汇总
Jan 05 Javascript
window.onload绑定多个事件的两种解决方案
May 15 Javascript
angular中的http拦截器Interceptors的实现
Feb 21 Javascript
node.js中使用Export和Import的方法
Sep 18 Javascript
JavaScript体验异步更好的解决办法
Jan 08 Javascript
Vue源码中要const _toStr = Object.prototype.toString的原因分析
Dec 09 Javascript
微信小程序前端自定义分享的实现方法
Jun 13 Javascript
使用layui监听器监听select下拉框,事件绑定不成功的解决方法
Sep 28 Javascript
uni-app微信小程序登录并使用vuex存储登录状态的思路详解
Nov 04 Javascript
Jquery如何使用animation动画效果改变背景色的代码
Jul 20 jQuery
解决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中记录用户访问过的产品,在cookie记录产品id,id取得产品信息
2011/05/04 PHP
php数组函数序列之array_values() 获取数组元素值的函数与方法
2011/10/30 PHP
php全排列递归算法代码
2012/10/09 PHP
PHP使用JpGraph绘制折线图操作示例【附源码下载】
2019/10/18 PHP
jquery 提交值不为空的元素示例代码
2013/05/10 Javascript
jquery的map与get方法详解
2013/11/04 Javascript
JQuery异步加载无限下拉框级联功能实现示例
2014/02/19 Javascript
js登录弹出层特效
2014/03/07 Javascript
关闭时刷新父窗口两种方法
2014/05/07 Javascript
JQuery遍历json数组的3种方法
2014/11/08 Javascript
NodeJS学习笔记之Http模块
2015/01/13 NodeJs
javascript中的深复制详解及实例分析
2016/12/29 Javascript
JavaScript数据结构之二叉树的删除算法示例
2017/04/13 Javascript
bootstrap table表格客户端分页实例
2017/08/07 Javascript
React教程之Props验证的具体用法(Props Validation)
2017/09/04 Javascript
利用javascript如何随机生成一定位数的密码
2017/09/22 Javascript
微信小程序模板template简单用法示例
2018/12/04 Javascript
vue-cli3 项目从搭建优化到docker部署的方法
2019/01/28 Javascript
详解React项目中碰到的IE问题
2019/03/14 Javascript
使用Python判断质数(素数)的简单方法讲解
2016/05/05 Python
Django如何实现内容缓存示例详解
2017/09/24 Python
Python实现的单向循环链表功能示例
2017/11/10 Python
python机器学习库常用汇总
2017/11/15 Python
浅谈flask中的before_request与after_request
2018/01/20 Python
Python读取本地文件并解析网页元素的方法
2018/05/21 Python
python批量从es取数据的方法(文档数超过10000)
2018/12/27 Python
python初学者,用python实现基本的学生管理系统(python3)代码实例
2019/04/10 Python
Django框架搭建的简易图书信息网站案例
2019/05/25 Python
Python 类的魔法属性用法实例分析
2019/11/21 Python
解决html5中的video标签ios系统中无法播放使用的问题
2020/08/10 HTML / CSS
英国最大的线上保健品零售商之一:Vitamin Planet
2016/12/01 全球购物
约瑟夫·特纳男装:Joseph Turner
2017/10/10 全球购物
美国男士和女士奢侈品折扣手表购物网站:Certified Watch Store
2018/06/13 全球购物
2014迎新年晚会策划方案
2014/02/23 职场文书
篮球友谊赛通讯稿
2014/10/10 职场文书
CSS 制作波浪效果的思路
2021/05/18 HTML / CSS