浅谈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 相关文章推荐
脚本吧 - 幻宇工作室用到js,超强推荐expand.js
Dec 23 Javascript
Jquery.Form 异步提交表单的简单实例
Mar 03 Javascript
js光标定位文本框回车表单提交问题的解决方法
May 11 Javascript
全面解析Bootstrap表单使用方法(表单控件状态)
Nov 24 Javascript
JavaScript sort数组排序方法和自我实现排序方法小结
Jun 06 Javascript
深入理解bootstrap框架之第二章整体架构
Oct 09 Javascript
JavaScript结合HTML DOM实现联动菜单
Apr 05 Javascript
JS简单验证上传文件类型的方法
Apr 17 Javascript
QRCode.js:基于JQuery的生成二维码JS库的使用
Jun 23 jQuery
React Native使用百度Echarts显示图表的示例代码
Nov 07 Javascript
详解使用WebPack搭建React开发环境
Aug 06 Javascript
vue实现员工信息录入功能
Jun 11 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中通过ADO调用Asscess数据库和COM程序
2006/10/09 PHP
php实现查询百度google收录情况(示例代码)
2013/08/02 PHP
PHP获取当前页面URL函数实例
2014/10/22 PHP
PHP计算加权平均数的方法
2015/07/16 PHP
PHP使用第三方即时获取物流动态实例详解
2017/04/27 PHP
使用一个for循环将N*N的二维数组的所有值置1实现方法
2017/05/29 PHP
PHP封装mysqli基于面向对象的mysql数据库操作类与用法示例
2019/02/25 PHP
JavaScript 实现简单的倒计时弹窗DEMO附图
2014/03/05 Javascript
JavaScript中检查对象property的存在性方法介绍
2014/12/30 Javascript
把普通对象转换成json格式的对象的简单实例
2016/07/04 Javascript
arcgis for js 修改infowindow样式的方法
2016/11/02 Javascript
webpack 打包压缩js和css的方法示例
2018/03/20 Javascript
iview同时验证多个表单问题总结
2018/09/29 Javascript
Vue绑定内联样式问题
2018/10/17 Javascript
使用jQuery实现掷骰子游戏
2019/10/24 jQuery
Python学习笔记(一)(基础入门之环境搭建)
2014/06/05 Python
python访问mysql数据库的实现方法(2则示例)
2016/01/06 Python
Python实现并行抓取整站40万条房价数据(可更换抓取城市)
2016/12/14 Python
node.js获取参数的常用方法(总结)
2017/05/29 Python
Python3实现获取图片文字里中文的方法分析
2018/12/13 Python
Python 判断奇数偶数的方法
2018/12/20 Python
关于pytorch多GPU训练实例与性能对比分析
2019/08/19 Python
手把手教你pycharm专业版安装破解教程(linux版)
2019/09/26 Python
Python如何通过Flask-Mail发送电子邮件
2020/01/29 Python
python实现简单俄罗斯方块
2020/03/13 Python
解决matplotlib.pyplot在Jupyter notebook中不显示图像问题
2020/04/22 Python
python Paramiko使用示例
2020/09/21 Python
Python collections模块的使用方法
2020/10/09 Python
材料成型专业个人求职信范文
2013/09/25 职场文书
证婚人经典证婚词
2014/01/09 职场文书
《阳光》教学反思
2014/02/23 职场文书
三分钟演讲稿事例
2014/03/03 职场文书
竞聘书模板
2014/03/31 职场文书
大专生找工作自荐书
2014/06/10 职场文书
2015年环卫处个人工作总结
2015/07/27 职场文书
小学六一儿童节活动开幕词
2016/03/04 职场文书