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 相关文章推荐
js中for in的用法示例解析
Dec 25 Javascript
jQuery获得指定元素坐标的方法
Apr 14 Javascript
jQuery网页右侧广告跟随滚动代码分享
Apr 20 Javascript
jQuery中trigger()与bind()用法分析
Dec 18 Javascript
jquery attr()设置和获取属性值实例教程
Sep 25 Javascript
jquery+ajax实现省市区三级联动 (封装和不封装两种方式)
May 15 jQuery
jQuery实现table表格信息的展开和缩小功能示例
Jul 21 jQuery
基于Node的Axure文件在线预览的实现代码
Aug 28 Javascript
vue element upload组件 file-list的动态绑定实现
Oct 11 Javascript
JS插件amCharts实现绘制柱形图默认显示数值功能示例
Nov 26 Javascript
js 数组当前行添加数据方法详解
Jul 28 Javascript
JavaScript原型链详解
Nov 07 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写出自己的BLOG系统 2
2010/04/12 PHP
PHP中使用smarty生成静态文件的例子
2014/04/24 PHP
php+mysql数据库查询实例
2015/01/21 PHP
PHP使用gmdate实现将一个UNIX 时间格式化成GMT文本的方法
2015/03/19 PHP
php遍历树的常用方法汇总
2015/06/18 PHP
简单的自定义php模板引擎
2016/08/26 PHP
用javascript实现页面打印的三种方法
2007/03/05 Javascript
jquery 插件之仿“卓越亚马逊”首页弹出菜单效果
2008/12/25 Javascript
关于setInterval、setTimeout在jQuery中的使用注意事项
2011/09/28 Javascript
无缝滚动js代码通俗易懂(自写)
2013/06/19 Javascript
利用javascript打开模态对话框(示例代码)
2014/01/11 Javascript
自己使用js/jquery写的一个定制对话框控件
2014/05/02 Javascript
jquery实现点击弹出可放大居中及关闭的对话框(附demo源码下载)
2016/05/10 Javascript
jQuery处理XML文件的几种方法
2016/06/14 Javascript
js绘制购物车抛物线动画
2020/11/18 Javascript
单行 JS 实现移动端金钱格式的输入规则
2017/05/22 Javascript
js自定义Tab选项卡效果
2017/06/05 Javascript
详解AngularJS1.x学习directive 中‘& ’‘=’ ‘@’符号的区别使用
2017/08/23 Javascript
使用FileReader API创建Vue文件阅读器组件
2018/04/03 Javascript
基于JS实现父组件的请求服务过程解析
2019/10/14 Javascript
JsonServer安装及启动过程图解
2020/02/28 Javascript
基于redis的小程序登录实现方法流程分析
2020/05/25 Javascript
vue实现标签云效果的示例
2020/11/09 Javascript
JavaScript对象访问器Getter及Setter原理解析
2020/12/08 Javascript
[05:10]2014DOTA2国际邀请赛 通往胜利之匙赛场探秘之旅
2014/07/18 DOTA
python基于Tkinter库实现简单文本编辑器实例
2015/05/05 Python
Python如何获取系统iops示例代码
2016/09/06 Python
Python解压 rar、zip、tar文件的方法
2019/11/19 Python
HTML5本地数据库基础操作详解
2016/04/26 HTML / CSS
档案管理员岗位职责
2013/12/01 职场文书
安全月宣传标语
2014/10/07 职场文书
一年级小学生评语大全
2014/12/25 职场文书
家长给老师的感谢信
2015/01/20 职场文书
python 爬取豆瓣网页的示例
2021/04/13 Python
MySQL8.0.24版本Release Note的一些改进点
2021/04/22 MySQL
html2 canvas svg不能识别的解决方案
2021/06/03 HTML / CSS