Javascript中的Callback方法浅析


Posted in Javascript onMarch 15, 2015

什么是callback

 回调函数就是一个通过函数指针调用的函数。如果你把函数的指针(地址)作为参数传递给另一个函数,当这个指针被用为调用它所指向的函数时,我们就说这是回调函数。回调函数不是由该函数的实现方直接调用,而是在特定的事件或条件发生时由另外的一方调用的,用于对该事件或条件进行响应。

这个解释看上去很复杂,于是找到了知乎上一个更好的解释

 你到一个商店买东西,刚好你要的东西没有货,于是你在店员那里留下了你的电话,过了几天店里有货了,店员就打了你的电话,然后你接到电话后就到店里去取了货。在这个例子里,你的电话号码就叫回调函数,你把电话留给店员就叫登记回调函数,店里后来有货了叫做触发了回调关联的事件,店员给你打电话叫做调用回调函数,你到店里去取货叫做响应回调事件。回答完毕。

在Javascript中:

 函数A作为参数(函数引用)传递到另一个函数B中,并且这个函数B执行函数A。我们就说函数A叫做回调函数。如果没有名称(函数表达式),就叫做匿名回调函数。

实际上,也就是把函数作为参数传递。

Javscript Callback

把上面那些复杂的解释都丢到垃圾桶里吧~,看看Callback是什么

Callback是什么

在jQuery中, hide的方法大概是这样子的

$(selector).hide(speed,callback)

使用的时候,
$('#element').hide(1000, function() {

    // callback function

});

我们只需要在里面写一个简单的函数
$('#element').hide(1000, function() {

    console.log('Hide');

});

有一个小小的注释在这其中:Callback 函数在当前动画 100% 完成之后执行。然后我们就可以看到真正的现象,当id为element的元素隐藏后,会在console中输出Hide。

就也就意味着:

Callback实际上是,当一个函数执行完后,现执行的那个函数就是所谓的callback函数。

Callback作用

正常情况下函数都是按顺序执行的,然而Javascript是一个事件驱动的语言。

function hello(){

    console.log('hello');

}
function world(){

    console.log('world');

}
hello();

world();

所以正常情况下都会按顺序执行的,然而当执行world事件的时间比较长时。
function hello(){

    setTimeout( function(){

        console.log( 'hello' );

    }, 1000 );

}
function world(){

    console.log('world');

}
hello();

world();

那么这个时候就不是这样的,这时会输出world,再输出hello,故而我们需要callback。

Callback实例

一个简单地例子如下

function add_callback(p1, p2 ,callback) {

    var my_number = p1 + p2;

    callback(my_number);

}
add_callback(5, 15, function(num){

    console.log("call " + num);

});

在例子中我们有一个add_callback的函数,接收三个参数:前两个是要相加的两个参数,第三个参数是回调函数。当函数执行时,返回相加结果,并在控制台中输出'call 20'。
Javascript 相关文章推荐
JavaScript中的原始值和复杂值
Jan 07 Javascript
js中遍历Map对象的方法
Jul 27 Javascript
原生js实现旋转木马轮播图效果
Feb 27 Javascript
Angular2的管道Pipe的使用方法
Nov 07 Javascript
细说webpack源码之compile流程-rules参数处理技巧(1)
Dec 26 Javascript
使用vuex缓存数据并优化自己的vuex-cache
May 30 Javascript
vue.js input框之间赋值方法
Aug 24 Javascript
vue 音乐App QQ音乐搜索列表最新接口跨域设置方法
Sep 25 Javascript
VUE脚手架的下载和配置步骤详解
Apr 01 Javascript
vue项目打包上传github并制作预览链接(pages)
Apr 19 Javascript
微信小程序批量上传图片到七牛(推荐)
Dec 19 Javascript
使用JavaScript获取Django模板指定键值数据
May 27 Javascript
Javascript中的call()方法介绍
Mar 15 #Javascript
Javascript中的高阶函数介绍
Mar 15 #Javascript
Javascript中this关键字的一些小知识
Mar 15 #Javascript
Javascript URI 解析介绍
Mar 15 #Javascript
PHP+jQuery+Ajax实现多图片上传效果
Mar 14 #Javascript
jQuery oLoader实现的加载图片和页面效果
Mar 14 #Javascript
jQuery实现购物车数字加减效果
Mar 14 #Javascript
You might like
Can't create/write to file 'C:\WINDOWS\TEMP\...MYSQL报错解决方法
2011/06/30 PHP
几种有用的变型 PHP中循环语句的用法介绍
2012/01/30 PHP
php实现获取农历(阴历)、节日、节气的类与用法示例
2017/11/20 PHP
浅谈laravel框架与thinkPHP框架的区别
2019/10/23 PHP
Javascript 圆角div的实现代码
2009/10/15 Javascript
基于Jquery实现表格动态分页实现代码
2011/06/21 Javascript
Jquery Validate 正则表达式实用验证代码大全
2013/08/23 Javascript
javascript仿php的print_r函数输出json数据
2013/09/13 Javascript
使用jQuery制作Web页面遮罩层插件的实例教程
2016/05/26 Javascript
JS控制FileUpload的上传文件类型实例代码
2016/10/07 Javascript
Bootstrap模态框案例解析
2017/03/05 Javascript
基于angular实现三级联动的生日插件
2017/05/12 Javascript
jQuery ajax调用webservice注意事项
2017/10/08 jQuery
React Native日期时间选择组件的示例代码
2018/04/27 Javascript
vue子路由跳转实现tab选项卡
2019/07/24 Javascript
javascript设计模式 ? 代理模式原理与用法实例分析
2020/04/16 Javascript
vue实现简易图片左右旋转,上一张,下一张组件案例
2020/07/31 Javascript
[02:20]2014DOTA2西雅图邀请赛 MVP外卡赛首胜采访
2014/07/09 DOTA
在服务器端实现无间断部署Python应用的教程
2015/04/16 Python
Python实现堆排序的方法详解
2016/05/03 Python
Diango + uwsgi + nginx项目部署的全过程(可外网访问)
2018/04/22 Python
python求最大连续子数组的和
2018/07/07 Python
Python中利用aiohttp制作异步爬虫及简单应用
2018/11/29 Python
简单了解python的内存管理机制
2019/07/08 Python
Django Form 实时从数据库中获取数据的操作方法
2019/07/25 Python
Python qrcode 生成一个二维码的实例详解
2020/02/12 Python
解决django中form表单设置action后无法回到原页面的问题
2020/03/13 Python
Python实现树莓派摄像头持续录像并传送到主机的步骤
2020/11/30 Python
总结30个CSS3选择器
2017/04/13 HTML / CSS
X/HTML5 和 XHTML2
2008/10/17 HTML / CSS
请写出一段Python代码实现删除一个list里面的重复元素
2015/12/29 面试题
2014年四风问题自我剖析材料
2014/09/15 职场文书
乡镇2014法制宣传日活动总结
2014/11/01 职场文书
太行山上观后感
2015/06/05 职场文书
团委副书记工作总结
2015/08/14 职场文书
教师学习中国梦心得体会
2016/01/05 职场文书