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 相关文章推荐
了解了这些才能开始发挥jQuery的威力
Oct 10 Javascript
JavaScript如何从listbox里同时删除多个项目
Oct 12 Javascript
js实现简单的购物车有图有代码
May 26 Javascript
jQuery.parseJSON(json)将JSON字符串转换成js对象
Jul 27 Javascript
JavaScript给url网址进行encode编码的方法
Mar 18 Javascript
javascript获取select标签选中的值
Jun 04 Javascript
JavaScript Ajax实现异步通信
Dec 14 Javascript
解决低版本的浏览器不支持es6的import问题
Mar 09 Javascript
vue-cli3脚手架的配置及使用教程
Aug 28 Javascript
利用百度echarts实现图表功能简单入门示例【附源码下载】
Jun 10 Javascript
js+html实现周岁年龄计算器
Jun 25 Javascript
Vue项目中使用jsonp抓取跨域数据的方法
Nov 10 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
php中将一个对象保存到Session中的方法
2015/03/13 PHP
[原创]ThinkPHP中SHOW_RUN_TIME不能正常显示运行时间的解决方法
2015/10/10 PHP
php+mysql+jquery实现日历签到功能
2017/02/27 PHP
PHP实现合并两个排序链表的方法
2018/01/19 PHP
javascript 新浪背投广告实现代码
2009/07/07 Javascript
dotopAlert 提示用户需安装播放器的代码
2012/09/17 Javascript
jquery遍历checkbox的注意事项说明
2014/02/21 Javascript
JS 清除字符串数组中,重复元素的实现方法
2016/05/24 Javascript
JavaScript中定义对象原型的两种使用方法
2016/12/15 Javascript
JS和canvas实现俄罗斯方块
2017/03/14 Javascript
小程序使用watch监听数据变化的方法详解
2019/09/20 Javascript
JS函数进阶之继承用法实例分析
2020/01/15 Javascript
node.js使用 http-proxy 创建代理服务器操作示例
2020/02/10 Javascript
JavaScript函数柯里化实现原理及过程
2020/12/02 Javascript
[01:35:53]完美世界DOTA2联赛PWL S3 Magma vs GXR 第二场 12.13
2020/12/17 DOTA
python文件的md5加密方法
2016/04/06 Python
python+tkinter编写电脑桌面放大镜程序实例代码
2018/01/16 Python
Python推导式简单示例【列表推导式、字典推导式与集合推导式】
2018/12/04 Python
使用Python自动化破解自定义字体混淆信息的方法实例
2019/02/13 Python
Python Flask 搭建微信小程序后台详解
2019/05/06 Python
python+webdriver自动化环境搭建步骤详解
2019/06/03 Python
python中seaborn包常用图形使用详解
2019/11/25 Python
Python内置类型性能分析过程实例
2020/01/29 Python
基于nexus3配置Python仓库过程详解
2020/06/15 Python
python 使用三引号时容易犯的小错误
2020/10/21 Python
使paramiko库执行命令时在给定的时间强制退出功能的实现
2021/03/03 Python
精致的手工皮鞋:Shoe Embassy
2019/11/08 全球购物
为什么使用接口?
2014/08/13 面试题
工商管理专业大学生职业生涯规划范文
2014/03/09 职场文书
干部考核评语
2014/04/29 职场文书
写景作文评语集锦
2014/12/25 职场文书
社区党建工作总结2015
2015/05/13 职场文书
幼儿园大班教学反思
2016/03/02 职场文书
教师实习自我鉴定总结
2019/08/20 职场文书
python爬取新闻门户网站的示例
2021/04/25 Python
MySQL REVOKE实现删除用户权限
2021/06/18 MySQL