浅谈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 相关文章推荐
google 搜索框添加关键字实现代码
Apr 24 Javascript
jquery垂直公告滚动实现代码
Dec 08 Javascript
js利用事件的阻止冒泡实现点击空白模态框的隐藏
Jan 24 Javascript
原生js模拟淘宝购物车项目实战
Nov 18 Javascript
artDialog+plupload实现多文件上传
Jul 19 Javascript
微信小程序开发之相册选择和拍照详解及实例代码
Feb 22 Javascript
Vue组件选项props实例详解
Aug 18 Javascript
layui表格checkbox选择全选样式及功能的实例
Mar 07 Javascript
解决vue自定义全局消息框组件问题
Nov 22 Javascript
JavaScript进制转换实现方法解析
Jan 18 Javascript
详解如何使用React Hooks请求数据并渲染
Oct 18 Javascript
Ant Design Pro 之 ProTable使用操作
Oct 31 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
杏林同学录(六)
2006/10/09 PHP
destoon之一键登录设置
2014/06/21 PHP
PHP Yii框架之表单验证规则大全
2015/11/16 PHP
php写app接口并返回json数据的实例(分享)
2017/05/20 PHP
Javascript操纵Cookie实现购物车程序
2007/02/15 Javascript
js实现收缩菜单效果实例代码
2013/10/30 Javascript
jquery实现图片翻页效果
2013/12/23 Javascript
apply和call方法定义及apply和call方法的区别
2015/11/15 Javascript
jQuery实时显示鼠标指针位置和键盘ASCII码
2016/03/28 Javascript
微信小程序 Flex布局详解
2016/10/09 Javascript
高效的jQuery代码编写技巧总结
2017/02/22 Javascript
详解angular笔记路由之angular-router
2017/09/12 Javascript
Vue修改mint-ui默认样式的方法
2018/02/03 Javascript
vue-image-crop基于Vue的移动端图片裁剪组件示例
2018/08/28 Javascript
vue中使用cookies和crypto-js实现记住密码和加密的方法
2018/10/18 Javascript
js根据需要计算数组中重复出现某个元素的个数
2019/01/18 Javascript
说说Vuex的getters属性的具体用法
2019/04/15 Javascript
jquery制作的移动端购物车效果完整示例
2020/02/24 jQuery
如何利用Node.js与JSON搭建简单的动态服务器
2020/06/16 Javascript
JS call()及apply()方法使用实例汇总
2020/07/11 Javascript
[49:42]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#2Secret VS EG第一局
2016/03/04 DOTA
python自定义解析简单xml格式文件的方法
2015/05/11 Python
python面向对象_详谈类的继承与方法的重载
2017/06/07 Python
Python+matplotlib实现计算两个信号的交叉谱密度实例
2018/01/08 Python
Python绘制频率分布直方图的示例
2019/07/08 Python
Django中从mysql数据库中获取数据传到echarts方式
2020/04/07 Python
伦敦一家西班牙童装精品店:La Coqueta
2018/02/02 全球购物
沙龙级头发造型工具:FOXYBAE
2018/07/01 全球购物
奥地利度假券的专家:we-are.travel
2019/04/10 全球购物
台湾演唱会订票网站:StubHub台湾
2019/06/11 全球购物
党委班子对照检查材料
2014/08/19 职场文书
作风整顿个人剖析材料
2014/10/06 职场文书
初中语文教学随笔
2015/08/15 职场文书
2016大一新生入学教育心得体会
2016/01/23 职场文书
《少年闰土》教学反思
2016/02/18 职场文书
详解Python函数print用法
2021/06/18 Python