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 新建的元素事件绑定问题解决方案
Jun 12 Javascript
javaScript中两个等于号和三个等于号之间的区别介绍
Jun 27 Javascript
js Object2String方便查看js对象内容
Nov 24 Javascript
js中this的用法实例分析
Jan 10 Javascript
谈谈JavaScript中的几种借用方法
Aug 09 Javascript
详谈jQuery.load()和Jsp的include的区别
Apr 12 jQuery
three.js中3D视野的缩放实现代码
Nov 16 Javascript
vue-cli启动本地服务局域网不能访问的原因分析
Jan 22 Javascript
浅谈微信小程序之官方UI框架we-ui使用教程
Aug 20 Javascript
微信小程序设置滚动条过程详解
Jul 25 Javascript
Vue替代marquee标签超出宽度文字横向滚动效果
Dec 09 Javascript
element日历calendar组件上月、今天、下月、日历块点击事件及模板源码
Jul 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
php缓冲 output_buffering和ob_start使用介绍
2014/01/30 PHP
Yii框架批量插入数据扩展类的简单实现方法
2017/05/23 PHP
关于 Laravel Redis 多个进程同时取队列问题详解
2017/12/25 PHP
使用swoole 定时器变更超时未支付订单状态的解决方案
2019/07/24 PHP
parseInt parseFloat js字符串转换数字
2010/08/01 Javascript
jquery选择器(常用选择器说明)
2010/09/28 Javascript
jquery下动态显示jqGrid以及jqGrid的属性设置容易出现问题的解决方法
2010/10/22 Javascript
js查错流程归纳
2012/05/04 Javascript
JS中批量给元素绑定事件过程中的相关问题使用闭包解决
2013/04/15 Javascript
js实现的切换面板实例代码
2013/06/17 Javascript
artdialog的图片/标题以及关闭按钮不显示的解决方法
2013/06/27 Javascript
javascript禁制后退键(Backspace)实例代码
2013/11/15 Javascript
jquery如何实现锚点链接之间的平滑滚动
2013/12/02 Javascript
javascript中使用正则计算中文长度的例子
2014/04/29 Javascript
Angular 通过注入 $location 获取与修改当前页面URL的实例
2017/05/31 Javascript
微信小程序 五星评分的实现实例
2017/08/04 Javascript
Vue+Vux项目实践完整代码
2017/11/30 Javascript
JavaScript实现五子棋游戏的方法详解
2019/07/08 Javascript
JavaScript实现秒杀时钟倒计时
2019/09/29 Javascript
JavaScript代理模式原理与用法实例详解
2020/03/10 Javascript
代码讲解Python对Windows服务进行监控
2018/02/11 Python
Python WSGI的深入理解
2018/08/01 Python
Selenium(Python web测试工具)基本用法详解
2018/08/10 Python
Python中的 enum 模块源码详析
2019/01/09 Python
python调用其他文件函数或类的示例
2019/07/16 Python
在VS2017中用C#调用python脚本的实现
2019/07/31 Python
python之pymysql模块简单应用示例代码
2019/12/16 Python
Pytorch evaluation每次运行结果不同的解决
2020/01/02 Python
Python devel安装失败问题解决方案
2020/06/09 Python
AmazeUI在模态框中嵌入表单形成模态输入框
2020/08/20 HTML / CSS
新西兰珠宝品牌:Michael Hill
2017/09/16 全球购物
财务情况说明书范文
2014/05/06 职场文书
大学团日活动新闻稿
2014/09/10 职场文书
2014年民政局关于保密工作整改措施
2014/09/19 职场文书
学生检讨书范文
2015/01/27 职场文书
HTML基础详解(下)
2021/10/16 HTML / CSS