浅谈javascript回调函数


Posted in Javascript onDecember 07, 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的闭包
Dec 31 Javascript
jquery通过a标签删除table中的一行的代码
Dec 02 Javascript
JS打开新窗口防止被浏览器阻止的方法
Jan 03 Javascript
jquery地址栏链接与a标签链接匹配之特效代码总结
Aug 24 Javascript
jquery实现滑屏大图定时收缩为小banner图片的广告代码
Sep 02 Javascript
jQuery+CSS实现滑动的标签分栏切换效果
Dec 17 Javascript
javascript构造函数以及原型对象的理解
Jan 13 Javascript
JS动态添加的div点击跳转到另一页面实现代码
Sep 30 Javascript
vue 每次渲染完页面后div的滚动条保持在最底部的方法
Mar 17 Javascript
10行代码实现微信小程序滑动tab切换
Dec 28 Javascript
微信小程序开发之map地图组件定位并手动修改位置偏差
Aug 17 Javascript
深入了解JS之作用域和闭包
Jun 16 Javascript
javascript实现playfair和hill密码算法
Dec 07 #Javascript
JS数组(Array)处理函数整理
Dec 07 #Javascript
浅谈JS日期(Date)处理函数
Dec 07 #Javascript
AngularJS HTML编译器介绍
Dec 06 #Javascript
AngularJS初始化过程分析(引导程序)
Dec 06 #Javascript
什么是 AngularJS?AngularJS简介
Dec 06 #Javascript
AngularJS入门教程(二):AngularJS模板
Dec 06 #Javascript
You might like
用PHP连mysql和oracle数据库性能比较
2006/10/09 PHP
详解thinkphp实现excel数据的导入导出(附完整案例)
2016/12/29 PHP
yii2.0框架数据库操作简单示例【添加,修改,删除,查询,打印等】
2020/04/13 PHP
JS模拟多线程
2007/02/07 Javascript
JavaScript 在各个浏览器中执行的耐性
2009/04/06 Javascript
js 单引号 传递方法
2009/06/22 Javascript
Mootools 1.2教程 滚动条(Slider)
2009/09/15 Javascript
CSS和Javascript简单复习资料
2010/06/29 Javascript
Prototype源码浅析 String部分(一)之有关indexOf优化
2012/01/15 Javascript
提高javascript效率 一次判断,而不要次次判断
2012/03/30 Javascript
js综合应用实例简单的表格统计
2013/09/03 Javascript
js判断字符是否是汉字的两种方法小结
2014/01/03 Javascript
jquery如何把数组变为字符串传到服务端并处理
2014/04/30 Javascript
javascript三元运算符用法实例
2015/04/16 Javascript
Angularjs使用ng-repeat中$even和$odd属性的注意事项
2016/12/31 Javascript
jquery实现input框获取焦点的简单实例
2017/01/26 Javascript
在Vue.js中使用Mixins的方法
2017/09/12 Javascript
vue-cli实现多页面多路由的示例代码
2018/01/30 Javascript
浅谈react受控组件与非受控组件(小结)
2018/02/09 Javascript
element ui 表格动态列显示空白bug 修复方法
2018/09/04 Javascript
微信小程序错误this.setData报错及解决过程
2019/09/18 Javascript
vue.js实现二级菜单效果
2019/10/19 Javascript
Nuxt配置Element-UI按需引入的操作方法
2020/07/06 Javascript
python实现删除文件与目录的方法
2014/11/10 Python
Python基于scrapy采集数据时使用代理服务器的方法
2015/04/16 Python
在unittest中使用 logging 模块记录测试数据的方法
2018/11/30 Python
Python对ElasticSearch获取数据及操作
2019/04/24 Python
Python入门Anaconda和Pycharm的安装和配置详解
2019/07/16 Python
python时间与Unix时间戳相互转换方法详解
2020/02/13 Python
Django 解决distinct无法去除重复数据的问题
2020/05/20 Python
python 通过文件夹导入包的操作
2020/06/01 Python
python 装饰器的基本使用
2021/01/13 Python
Regatta官网:英国最受欢迎的户外服装和鞋类品牌
2019/05/01 全球购物
英国电子产品购物网站:Tech in the basket
2019/11/08 全球购物
2014年商场工作总结
2014/11/22 职场文书
毕业设计致谢语
2015/05/14 职场文书