理解javascript回调函数


Posted in Javascript onDecember 28, 2014

把函数作为参数传入到另一个函数中。这个函数就是所谓的回调函数

经常遇到这样一种情况,某个项目的A层和B层是由不同的人员协同完成.A层负责功能funA,B层负责funcB。当B层要用到某个模块的数据,于是他对A层人员说,我需要你们提供满足某种需求的数据,你给我提供一个接口。

A层的人员说:我给你提供数据,怎么展示和处理则是B的事情。
当然B层不可能为你每个需求都提供一个数据接口,B给A提供一个通过的接口.B得到数据,然后B写函数去展示。

即,你需要和其他人合作,别人提供数据,而你不需要关注别人获取或者构建数据的方式方法。你只要对这个拿到的数据进行操作。这时候就需要使用回调函数

因此,回调本质上是一种设计模式,并且jQuery(包括其他框架)的设计原则遵循了这个模式。

一个同步(阻塞)中使用回调的例子,目的是在func1代码执行完成后执行func2。

var func1=function(callback){

    //do something.

    (callback && typeof(callback) === "function") && callback();

}
func1(func2);

    var func2=function(){

}

异步回调的例子:

$(document).ready(callback);
    $.ajax({

        url: "test.html",

        context: document.body

    }).done(function() { 

        $(this).addClass("done");

    }).fail(function() { 

        alert("error");

    }).always(function() { 

        alert("complete"); 

    });

注意的是,ajax请求确实是异步的,不过这请求是由浏览器新开一个线程请求,当请求的状态变更时,如果先前已设置回调,这异步线程就产生状态变更事件放到 JavaScript引擎的处理队列中等待处理。见:http://www.phpv.net/html/1700.html

回调什么时候执行

回调函数,一般在同步情境下是最后执行的,而在异步情境下有可能不执行,因为事件没有被触发或者条件不满足。

回调函数的使用场合

资源加载:动态加载js文件后执行回调,加载iframe后执行回调,ajax操作回调,图片加载完成执行回调,AJAX等等。
DOM事件及Node.js事件基于回调机制(Node.js回调可能会出现多层回调嵌套的问题)。
setTimeout的延迟时间为0,这个hack经常被用到,settimeout调用的函数其实就是一个callback的体现

链式调用:链式调用的时候,在赋值器(setter)方法中(或者本身没有返回值的方法中)很容易实现链式调用,而取值器(getter)相对来说不好实现链式调用,因为你需要取值器返回你需要的数据而不是this指针,如果要实现链式方法,可以用回调函数来实现

setTimeout、setInterval的函数调用得到其返回值。由于两个函数都是异步的,即:他们的调用时序和程序的主流程是相对独立的,所以没有办法在主体里面等待它们的返回值,它们被打开的时候程序也不会停下来等待,否则也就失去了setTimeout及setInterval的意义了,所以用return已经没有意义,只能使用callback。callback的意义在于将timer执行的结果通知给代理函数进行及时处理。

网上收集一下资料,应该弄懂了,自己整理出一个例子:

function fun(num,callback){

    if(num<0)  { 

        alert("调用A层函数处理!");

        alert("数据不能为负,输入错误!"); 

    }else if(num==0){

        alert("调用A层函数处理!");

        alert("该数据项不存在!");

    }else{

        alert("调用B层函数处理!");

        callback(1);

    }

}

function test(){

    var num=document.getElementById("score").value;

    fun(num,function(back){ //匿名B层处理函数

alert(":"+back);

        if(num<2) 

            alert("数字为1");

        else if(num<=3) 

            alert("数字为2或3!");

        else 

            alert("数字大于3!"); 

    })

 }

当函数开始执行fun的时候,先跑去找判定num是否是负数或者为零,否则执行B层处理函数alert(":"+back);输出1,判定为<2、<=3、>3等情况。

经验小提示:

最好保证回调存在且必须是函数引用或者函数表达式:

(callback && typeof(callback) === "function") && callback();
 var obj={

        init : function(callback){

        //TODO ...

        if(callback && typeof(callback) === "function") && callback()){

              callback('init...');//回调

        }

    }

 
最后,关于为什么要使用回调函数呢?下面的比喻很生动有趣。

你有事去隔壁寝室找同学,发现人不在,你怎么办呢?

方法1,每隔几分钟再去趟隔壁寝室,看人在不
方法2,拜托与他同寝室的人,看到他回来时叫一下你

前者是轮询,后者是回调。

那你说,我直接在隔壁寝室等到同学回来可以吗?

可以啊,只不过这样原本你可以省下时间做其他事,现在必须浪费在等待上了。把原来的非阻塞的异步调用变成了阻塞的同步调用。

JavaScript的回调是在异步调用场景下使用的,使用回调性能好于轮询。

Javascript 相关文章推荐
javascript 框架小结 个人工作经验
Jun 13 Javascript
File, FileReader 和 Ajax 文件上传实例分析(php)
Apr 27 Javascript
Jquery实现的一种常用高亮效果示例代码
Jan 28 Javascript
jQuery 移动端artEditor富文本编辑器
Jan 11 Javascript
如何使用Bootstrap的modal组件自定义alert,confirm和modal对话框
Mar 01 Javascript
微信QQ的二维码登录原理js代码解析
Jun 23 Javascript
JS异步文件上传(兼容IE8+)
Apr 02 Javascript
详解vue嵌套路由-query传递参数
May 23 Javascript
Bootstrap一款超好用的前端框架
Sep 25 Javascript
Vue通过provide inject实现组件通信
Sep 03 Javascript
html实现随机点名器的示例代码
Apr 02 Javascript
JavaScript如何优化逻辑判断代码详解
Jun 08 Javascript
JavaScript设计模式之建造者模式介绍
Dec 28 #Javascript
如何编写高质量JS代码
Dec 28 #Javascript
JavaScript设计模式之原型模式(Object.create与prototype)介绍
Dec 28 #Javascript
javascript中定义类的方法汇总
Dec 28 #Javascript
js数组的操作指南
Dec 28 #Javascript
JavaScript设计模式之适配器模式介绍
Dec 28 #Javascript
javascript+canvas制作九宫格小程序
Dec 28 #Javascript
You might like
web方式ftp
2006/10/09 PHP
PHP版自动生成文章摘要
2008/07/23 PHP
PHP读取XML值的代码(推荐)
2011/01/01 PHP
PHP命名空间(Namespace)简明教程
2014/06/11 PHP
php使用fullcalendar日历插件详解
2019/03/06 PHP
KindEditor在php环境下上传图片功能集成的方法示例
2020/07/20 PHP
Extjs学习笔记之三 extjs form更多的表单项
2010/01/07 Javascript
JavaScript用Number方法实现string转int
2014/05/13 Javascript
jQuery之DOM对象和jQuery对象的转换与区别分析
2015/01/08 Javascript
JS动态添加Table的TR,TD实现方法
2015/01/28 Javascript
js实现图片和链接文字同步切换特效的方法
2015/02/20 Javascript
CSS+JS实现点击文字弹出定时自动关闭DIV层菜单的方法
2015/05/12 Javascript
AngularJS仿苹果滑屏删除控件
2016/01/18 Javascript
全面解析多种Bootstrap图片轮播效果
2016/05/27 Javascript
基于JS实现翻书效果的页面切换样式
2017/02/16 Javascript
前端开发不得不知的10个最佳ES6特性
2017/08/30 Javascript
bootstrap实现二级下拉菜单效果
2017/11/23 Javascript
vue + vuex todolist的实现示例代码
2018/03/09 Javascript
JavaScript原型对象、构造函数和实例对象功能与用法详解
2018/08/04 Javascript
js设置鼠标悬停改变背景色实现详解
2019/06/26 Javascript
使用layui前端框架弹出form表单以及提交的示例
2019/10/25 Javascript
vue中重定向redirect:‘/index‘,不显示问题、跳转出错的完美解决
2020/09/28 Javascript
详解Python中内置的NotImplemented类型的用法
2015/03/31 Python
python调用java模块SmartXLS和jpype修改excel文件的方法
2015/04/28 Python
详解python的ORM中Pony用法
2018/02/09 Python
Python实现读取机器硬件信息的方法示例
2018/06/09 Python
Python 十六进制整数与ASCii编码字符串相互转换方法
2018/07/09 Python
python虚拟环境模块venv使用及示例
2020/03/04 Python
python golang中grpc 使用示例代码详解
2020/06/03 Python
python是怎么被发明的
2020/06/15 Python
澳大利亚电子产品购物网站:Dick Smith
2017/02/02 全球购物
Agoda中文官网:安可达(低价预订全球酒店)
2021/01/18 全球购物
镇班子对照检查材料思想汇报
2014/09/24 职场文书
2015年教研室工作总结范文
2015/05/23 职场文书
2016年主题党日活动总结
2016/04/05 职场文书
logback如何自定义日志存储
2021/08/30 Java/Android