理解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 Konami Code 实现代码
Jul 29 Javascript
浅谈javascript 面向对象编程
Oct 28 Javascript
页面中iframe相互传值传参
Dec 13 Javascript
javascript实现的像java、c#之类的sleep暂停的函数代码
Mar 04 Javascript
jquery photoFrame 图片边框美化显示插件
Jun 28 Javascript
Dojo 学习要点
Sep 03 Javascript
jquery链式操作的正确使用方法
Jan 06 Javascript
JS、DOM和JQuery之间的关系示例分析
Apr 09 Javascript
vue中component组件的props使用详解
Sep 04 Javascript
详解webpack编译速度提升之DllPlugin
Feb 05 Javascript
js防抖函数和节流函数使用场景和实现区别示例分析
Apr 11 Javascript
js 实现Material UI点击涟漪效果示例
Sep 23 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
PHP文件管理之实现网盘及压缩包的功能操作
2017/09/20 PHP
PHP+Redis事务解决高并发下商品超卖问题(推荐)
2020/08/03 PHP
JQuery 网站换肤功能实现代码
2009/11/02 Javascript
JavaScript高级程序设计(第3版)学习笔记9 js函数(下)
2012/10/11 Javascript
JS按字节截取字符长度实例
2013/11/20 Javascript
用json方式实现在 js 中建立一个map
2014/05/02 Javascript
jQuery实现冻结表格行和列
2015/04/29 Javascript
javascript显示中文日期的方法
2015/06/18 Javascript
javascript实现点击提交按钮后显示loading的方法
2015/07/03 Javascript
Bootstrap弹出框(modal)垂直居中的问题及解决方案详解
2016/06/12 Javascript
Google 地图获取API Key详细教程
2016/08/06 Javascript
JavaScript页面实时显示当前时间实例代码
2016/10/23 Javascript
浅谈jQuery中的$.extend方法来扩展JSON对象
2017/02/12 Javascript
jQuery遍历节点方法汇总(推荐)
2017/05/13 jQuery
浅析为什么a=&quot;abc&quot; 不等于 a=new String(&quot;abc&quot;)
2017/10/25 Javascript
js使用ajax传值给后台,后台返回字符串处理方法
2018/08/08 Javascript
vue倒计时刷新页面不会从头开始的解决方法
2020/03/03 Javascript
vue2.x数组劫持原理的实现
2020/04/19 Javascript
JavaScript编码小技巧分享
2020/09/17 Javascript
python执行子进程实现进程间通信的方法
2015/06/02 Python
Python中asyncore异步模块的用法及实现httpclient的实例
2016/06/28 Python
解决python ogr shp字段写入中文乱码的问题
2018/12/31 Python
关于Pytorch的MNIST数据集的预处理详解
2020/01/10 Python
pytorch下使用LSTM神经网络写诗实例
2020/01/14 Python
Python装饰器实现方法及应用场景详解
2020/03/26 Python
python实现将列表中各个值快速赋值给多个变量
2020/04/02 Python
Python开发入门——迭代的基本使用
2020/09/03 Python
说说在weblogic中开发消息Bean时的persistent与non-persisten的差别
2013/04/07 面试题
《尊严》教学反思
2014/02/11 职场文书
会计专业导师推荐信
2014/03/08 职场文书
村容村貌整治方案
2014/05/21 职场文书
五好家庭事迹材料
2014/12/20 职场文书
看上去很美观后感
2015/06/10 职场文书
爱护公物主题班会
2015/08/17 职场文书
深度学习详解之初试机器学习
2021/04/14 Python
java后台调用接口及处理跨域问题的解决
2022/03/24 Java/Android