浅谈javascript回调函数

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

经常遇到这样一种情况，某个项目的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的回调是在异步调用场景下使用的，使用回调性能好于轮询。

更简单一点：

“我现在出发，到了通知你”
这是一个异步的流程，“我出发”这个过程中（函数执行），“你”可以去做任何事，“到了”（函数执行完毕）“通知你”（回调）进行之后的流程

赞 (0)

相关推荐

  • Javascript Jquery 遍历Json的实现代码

    复制代码 代码如下: /* author: liulf function: var __db_cpcj=vCpcj; var __db_cp=vCp; var vCp={"cppage":[ {"cpdh":"A01000101","page":"1","ca":"1309-36-0","mc":"硫铁矿","enam

  • Javascript 遍历页面text控件详解

    以下函数实现了列出页面中所有html控件类型为text的控件ID 复制代码 代码如下: function Texts()         {              //var els= document.getElementsByTagName("*");   //els得到页面所有控件              var els= document.getElementsByTagName("INPUT"); //上面的也可,这样可以减少循环          

  • JavaScript中遍历对象的property的3种方法介绍

    JavaScript中遍历对象的property的3种方法介绍

    在JavaScript中,可以用三种方法来遍历对象的property: 1.for/in.可以使用for/in语句遍历对象自身的property(Own Property)及其从原型对象处继承的property,只有enumerable的property才会被遍历到. 2.Object.keys().可以将对象作为参数传入Object.keys(),Object.keys()语句将返回由所有property名称字符串所组成的数组.Object.keys()语句仅返回对象自身的(Own Prope

  • 理解javascript回调函数

    把函数作为参数传入到另一个函数中.这个函数就是所谓的回调函数 经常遇到这样一种情况,某个项目的A层和B层是由不同的人员协同完成.A层负责功能funA,B层负责funcB.当B层要用到某个模块的数据,于是他对A层人员说,我需要你们提供满足某种需求的数据,你给我提供一个接口. A层的人员说:我给你提供数据,怎么展示和处理则是B的事情. 当然B层不可能为你每个需求都提供一个数据接口,B给A提供一个通过的接口.B得到数据,然后B写函数去展示. 即,你需要和其他人合作,别人提供数据,而你不需要关注别人获取

  • javascript数组遍历for与for in区别详解

    js中遍历数组的有两种方式 复制代码 代码如下: var array=['a'] //标准的for循环 for(var i=1;i<array.length;i++){     alert(array[i]) } //foreach循环 for(var i in array){     alert(array[i]) } 正常情况下上面两种遍历数组的方式结果一样.首先说两者的第一个区别 标准的for循环中的i是number类型,表示的是数组的下标,但是foreach循环中的i表示的是数组的key

  • javascript实现网页子页面遍历回调的方法（涉及 window.frames、递归函数、函数上下文）

    本文实例讲述了javascript实现网页子页面遍历回调的方法(涉及 window.frames.递归函数.函数上下文).分享给大家供大家参考.具体如下: 提炼于本人手写的纯 JavaScript 工具程序,用于遍历当前网页的所有子页面 并执行迭代回调,且回调函数返回值可用于结果回传,有助于减少闭包变量~ 其特点在于 -- 递归遍历时只检索子页面的 Window 对象,不立即执行回调函数,而是在检索结束后在普通循环结构中回调.这样可以尽量减少 递归调用时的内存消耗,也简化了程序结构,易于维护 全

  • javascript遍历控件实例详细解析

    js遍历页面控件, 复制代码 代码如下: var inputArr = document.forms[0];   for( var i = 0; i < inputArr.length; i++ ) {    if( inputArr[i].type.toUpperCase() == "BUTTON" ) {     inputArr[i].disabled="disabled";    }else if( inputArr[i].type.toUpperCa

  • javascript 回调函数详解

    回调函数定义 回调函数就是一个通过函数指针调用的函数.如果你把函数的指针(地址)作为参数传递给另一个函数,当这个指针被用为调用它所指向的函数时,我们就说这是回调函数.回调函数不是由该函数的实现方直接调用,而是在特定的事件或条件发生时由另外的一方调用的,用于对该事件或条件进行响应. 在JavaScript中,回调函数具体的定义为:函数A作为参数(函数引用)传递到另一个函数B中,并且这个函数B执行函数A.我们就说函数A叫做回调函数.如果没有名称(函数表达式),就叫做匿名回调函数.因此callback

  • 浅谈javascript回调函数

    把函数作为参数传入到另一个函数中.这个函数就是所谓的回调函数 经常遇到这样一种情况,某个项目的A层和B层是由不同的人员协同完成.A层负责功能funA,B层负责funcB.当B层要用到某个模块的数据,于是他对A层人员说,我需要你们提供满足某种需求的数据,你给我提供一个接口. A层的人员说:我给你提供数据,怎么展示和处理则是B的事情. 当然B层不可能为你每个需求都提供一个数据接口,B给A提供一个通过的接口.B得到数据,然后B写函数去展示. 即,你需要和其他人合作,别人提供数据,而你不需要关注别人获取

  • 浅谈Javascript嵌套函数及闭包

    [嵌套函数] JavaScript允许嵌入的函数,允许函数用作数据,并且在函数词法作用域下面,可以产生与传统面向对象语言不同的惊人地方. 首先,JavaScript的函数是通过词法来划分作用域的,而不是动态的划分作用域的,于是,函数的是在定义它们的作用域中运行,而不是在执行它们的作用域中运行,所以,当嵌套函数和它的外围函数定义在同一个词法作用域中的时候,是很容易理解的.比如下面很平淡无奇的代码: 复制代码 代码如下: var x = 'global'; function f () { var x

  • 浅谈JavaScript的函数及作用域

    函数和作用域是JavaScript的重要组成部分,我们在使用JavaScript编写程序的过程中经常要用到这两部分内容,作为初学者,我经常有困惑,借助写此博文来巩固下之前学习的内容. (一)JavaScript函数 JavaScript函数是指一个特定代码块,可能包含多条语句,可以通过名字来供其他语句调用以执行函数包含的代码语句. 1.JavaScript创建函数的方法有两种: 函数声明: function funcDeclaration(){ return 'A is a function';

  • 浅谈jquery回调函数callback的使用

    回调函数必须是全局函数或者静态函数,不可定义为某个特定的类的成员函数 callback函数在当前动画100%完成之后执行 复制代码 代码如下: $("p").hide(1000); alert("the paragraph is now hidden"); <!--未使用回调函数,段落未完全隐藏时就弹出信息--> $("p").hide(1000,function(){alert("the paragraph is now

  • 浅谈JavaScript function函数种类

    本篇主要介绍普通函数.匿名函数.闭包函数 1.普通函数介绍 1.1 示例 复制代码 代码如下: function ShowName(name) {     alert(name); } 1.2 Js中同名函数的覆盖 在Js中函数是没有重载,定义相同函数名.不同参数签名的函数,后面的函数会覆盖前面的函数.调用时,只会调用后面的函数. 复制代码 代码如下: var n1 = 1;   function add(value1) {     return n1 + 1; } alert(add(n1))

  • 浅谈Javascript中的函数、this以及原型

    关于函数 在Javascript中函数实际上就是一个对象,具有引用类型的特征,所以你可以将函数直接传递给变量,这个变量将表示指向函数"对象"的指针,例如: function test(message){ alert(message); } var f = test; f('hello world'); 你也可以直接将函数申明赋值给变量: var f = function(message){ alert(message); }; f('hello world'); 在这种情况下,函数申明

  • 浅谈JavaScript中变量和函数声明的提升

    现象: 1. 在JavaScript中变量和函数的声明会提升到最顶部执行. 2. 函数的提升高于变量的提升. 3. 函数内部如果用var声明了相同名称的外部变量,函数将不再向上寻找. 4. 匿名函数不会提升. 5. 不同<script>块中的函数互不影响. 例子: 函数声明提升高于变量声明 //同时声明变量a和函数a var a; function a() {} alert(typeof a); //显示的是"function",初步证明function的优先级高于var.

  • 浅谈javascript:两种注释,声明变量,定义函数

    浅谈javascript:两种注释,声明变量,定义函数

    JavaScript:单行注释用//呵呵呵呵:多行注释用/*hdhdhdh*/ javascript中区别大小写,定义变量使用关键字var,语法如下:var 变量名,其中变量从编程角度讲,变量是用于存储某种/某些数值的存储器. javascript函数调用: 以上就是小编为大家带来的浅谈javascript:两种注释,声明变量,定义函数全部内容了,希望大家多多支持我们~

  • 浅谈javascript的url参数parse和build函数

    Parse: function getParam() { var param = new Object() var item = new Array(); if (location.search == "") { return param; }; var query = location.search.substring(1); var list = query.split('&'); for(var i = 0; i < list.length; i++) { item

  • 浅谈JavaScript函数的四种存在形态

    函数的四种存在形态: 1.函数形态 2.方法形态 将函数赋值给某一个对象的成员,那么就称为方法 3.构造器形态 4.上下文形态 1.函数形态: var foo = function() { alert(this); //this是window }; 2.方法形态: o = {}; o.foo = foo; //将函数foo赋值给对象o的foo属性 o.foo(); //弹出的是object,此时的this表示object var lib = { test:function() { alert(t

随机推荐