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系列(13) This? Yes,this!
Jan 18 Javascript
jQuery学习笔记之jQuery构建函数的7种方法
Jun 03 Javascript
jQuery实现在最后一个元素之前插入新元素的方法
Jul 18 Javascript
js判断复选框是否选中及选中个数的实现代码
May 30 Javascript
JS 调用微信扫一扫功能
Dec 22 Javascript
图文详解Javascript中的上下文和作用域
Feb 15 Javascript
JS实现显示当前日期的实例代码
Jul 03 Javascript
在Web关闭页面时发送Ajax请求的实现方法
Mar 07 Javascript
javascript防抖函数debounce详解
Jun 11 Javascript
js中的this的指向问题详解
Aug 29 Javascript
js神秘的电报密码 哈弗曼编码实现
Sep 10 Javascript
jQuery实现滑动星星评分效果(每日分享)
Nov 13 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
各种常用浏览器getBoundingClientRect的解析
2009/05/21 Javascript
jQuery 使用手册(七)
2009/09/23 Javascript
AeroWindow 基于JQuery的弹出窗口插件
2011/06/27 Javascript
防止xss和sql注入:JS特殊字符过滤正则
2013/04/18 Javascript
用js实现table单元格高宽调整,兼容合并单元格(兼容IE6、7、8、FF)实例
2013/06/25 Javascript
js兼容pc端浏览器并有多种弹出小提示的手机端浮层控件实例
2015/04/29 Javascript
JavaScript的面向对象编程基础
2015/08/13 Javascript
javascript实现2016新年版日历
2016/01/25 Javascript
Jquery插件仿百度搜索关键字自动匹配功能
2016/05/11 Javascript
Highcharts学习之数据列
2016/08/03 Javascript
把json格式的字符串转换成javascript对象或数组的方法总结
2016/11/03 Javascript
基于ajax与msmq技术的消息推送功能实现代码
2016/12/26 Javascript
基于Vue实现timepicker
2017/04/25 Javascript
微信小程序canvas写字板效果及实例
2017/06/15 Javascript
微信小程序 共用变量值的实现
2017/07/12 Javascript
Vue.js移动端左滑删除组件的实现代码
2017/09/08 Javascript
Three.js利用顶点绘制立方体的方法详解
2017/09/27 Javascript
jQuery实现点击图标div循环放大缩小功能
2018/09/30 jQuery
vue-cli3 项目从搭建优化到docker部署的方法
2019/01/28 Javascript
JS实现的点击按钮图片上下滚动效果示例
2019/01/28 Javascript
jQuery实现鼠标放置名字上显示详细内容气泡提示框效果的方法分析
2020/04/04 jQuery
[53:23]Secret vs Liquid 2018国际邀请赛淘汰赛BO3 第二场 8.25
2018/08/29 DOTA
完美解决Python 2.7不能正常使用pip install的问题
2018/06/12 Python
Python 16进制与中文相互转换的实现方法
2018/07/09 Python
神经网络相关之基础概念的讲解
2018/12/29 Python
解决pycharm回车之后不能换行或不能缩进的问题
2019/01/16 Python
python关于矩阵重复赋值覆盖问题的解决方法
2019/07/19 Python
使用Python制作一个打字训练小工具
2019/10/01 Python
python文件操作的简单方法总结
2019/11/07 Python
浅析Django中关于session的使用
2019/12/30 Python
python小程序之4名牌手洗牌发牌问题解析
2020/05/15 Python
TensorFlow实现模型断点训练,checkpoint模型载入方式
2020/05/26 Python
加拿大著名的奢侈品购物网站:SSENSE(支持中文)
2020/06/25 全球购物
韩语专业本科生求职信
2013/10/01 职场文书
python基于tkinter制作m3u8视频下载工具
2021/04/24 Python
MongoDB使用场景总结
2022/02/24 MongoDB