`

彻底理解javascript的回调函数(推荐)

 
阅读更多

在javascript中回调函数非常重要,它们几乎无处不在。像其他更加传统的编程语言都有回调函数概念,但是非常奇怪的是,完完整整谈论回调函数的在线教程比较少,倒是有一堆关于call()和apply()函数的,或者有一些简短的关于callback的使用示例。

  函数也是对象

  想弄明白回调函数,首先的清楚地明白函数的规则。在javascript中,函数是比较奇怪的,但它确确实 实是对象。确切地说,函数是用Function()构造函数创建的Function对象。Function对象包含一个字符串,字符串包含函数的 javascript代码。假如你是从C语言或者java语言转过来的,这也许看起来很奇怪,代码怎么可能是字符串?但是对于javascript来说, 这很平常。数据和代码之间的区别是很模糊的。

//可以这样创建函数
var fn = new Function("arg1", "arg2", "return arg1 * arg2;");
fn(2, 3);   //6

  这样做的一个好处,可以传递代码给其他函数,也可以传递正则变量或者对象(因为代码字面上只是对象而已)。

  传递函数作为回调

  很容易把一个函数作为参数传递。

复制代码
function fn(arg1, arg2, callback){
    var num = Math.ceil(Math.random() * (arg1 - arg2) + arg2);
    callback(num);  //传递结果
}

fn(10, 20, function(num){
   console.log("Callback called! Num: " + num); 
});    //结果为10和20之间的随机数
复制代码

  可能这样做看起比较麻烦,甚至有点愚蠢,为何不正常地返回结果?但是当遇上必须使用回调函数之时,你也许就不这样认为了!

  别挡道

  传统函数以参数形式输入数据,并且使用返回语句返回值。理论上,在函数结尾处有一个return返回语句,结构上就是:一个输入点和一个输出点。这比较容易理解,函数本质上就是输入和输出之间实现过程的映射。

  但是,当函数的实现过程非常漫长,你是选择等待函数完成处理,还是使用回调函数进行异步处理呢?这种情况下,使用回调函数变得至关重要,例 如:AJAX请求。若是使用回调函数进行处理,代码就可以继续进行其他任务,而无需空等。实际开发中,经常在javascript中使用异步调用,甚至在 这里强烈推荐使用!

  下面有个更加全面的使用AJAX加载XML文件的示例,并且使用了call()函数,在请求对象(requested object)上下文中调用回调函数。

复制代码
function fn(url, callback){
    var httpRequest;    //创建XHR
    httpRequest = window.XMLHttpRequest ? new XMLHttpRequest() :   //针对IE进行功能性检测
    window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") : undefined;
    
    httpRequest.onreadystatechange = function(){
      if(httpRequest.readystate === 4 && httpRequest.status === 200){  //状态判断
          callback.call(httpRequest.responseXML);  
       }
    };
    httpRequest.open("GET", url);
    httpRequest.send();
}

fn("text.xml", function(){    //调用函数
   console.log(this);   //此语句后输出
});

console.log("this will run before the above callback.");  //此语句先输出
复制代码

  我们请求异步处理,意味着我们开始请求时,就告诉它们完成之时调用我们的函数。在实际情况中,onreadystatechange事件处理程 序还得考虑请求失败的情况,这里我们是假设xml文件存在并且能被浏览器成功加载。这个例子中,异步函数分配给了onreadystatechange事 件,因此不会立刻执行。

  最终,第二个console.log语句先执行,因为回调函数直到请求完成才执行。

分享到:
评论

相关推荐

    javascript 回调函数示例

    javascript 回调函数示例

    理解和使用 JavaScript 中的回调函数

    理解和使用 JavaScript 中的回调函数,,,,,,,,,,,,,,,,,,

    javascript回调函数详解参考.docx

    javascript回调函数详解参考.docx

    理解javascript回调函数

    这个函数就是所谓的回调函数 经常遇到这样一种情况,某个项目的A层和B层是由不同的人员协同完成.A层负责功能funA,B层负责funcB。当B层要用到某个模块的数据,于是他对A层人员说,我需要你们提供满足某种需求的数据,你...

    javascript 回调函数详解

    在JavaScript中,回调函数具体的定义为:函数A作为参数(函数引用)传递到另一个函数B中,并且这个函数B执行函数A。我们就说函数A叫做回调函数。如果没有名称(函数表达式),就叫做匿名回调函数。因此callback 不一定...

    浅析JavaScript回调函数应用_.docx

    浅析JavaScript回调函数应用_.docx

    js回调函数的使用技巧和认识

    js回调函数js回调函数js回调函数js回调函数js回调函数js回调函数js回调函数js回调函数js回调函数js回调函数js回调函数js回调函数js回调函数js回调函数js回调函数js回调函数js回调函数js回调函数js回调函数js回调函数...

    微信小程序中使用javascript 回调函数

    主要介绍了微信小程序中使用javascript 回调函数的相关资料,需要的朋友可以参考下

    浅析JavaScript回调函数应用

    在JavaScript中,回调函数具体的定义为:函数A作为参数(函数引用)传递到另一个函数B中,并且这个函数B执行函数A。我们就说函数A叫做回调函数。如果没有名称(函数表达式),就叫做匿名回调函数。因此callback 不一定...

    js回调函数示例

    回调示例

    深入理解JavaScript系列

    深入理解JavaScript系列(9):根本没有“JSON对象”这回事! 深入理解JavaScript系列(10):JavaScript核心(晋级高手必读篇) 深入理解JavaScript系列(11):执行上下文(Execution Contexts) 深入理解...

    关于javascript 回调函数中变量作用域的讨论

    1、背景 Javascript中的回调函数,相信大家都不陌生,最明显的例子是做Ajax请求时,提供的回调函数, 实际上DOM节点的事件处理方法(onclick,ondblclick等)也是回调函数。 在使用DWR的时候,回调函数可以作为第一个...

    javascript回调函数的概念理解与用法分析

    主要介绍了javascript回调函数的概念理解与用法,结合具体实例形式分析了javascript回调函数的功能、原理、使用方法与相关注意事项,需要的朋友可以参考下

    [JavaSrcipt]-JS回调函数.pdf

    这份资源详细介绍了JavaScript中回调函数的概念和用法。文档中提供了回调函数的基本定义、回调函数的使用场景以及回调函数的实现方法等多个方面的内容,为开发者提供了全面的指导和帮助。 本文档还介绍了如何使用回...

    JavaScript回调函数callback用法解析

    这篇文章主要介绍了JavaScript回调函数callback用法解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 JavaScript回调函数的使用是很常见的,引用官方回调...

    回调函数的应用例子

    一些使用回调函数的小例子,融合了javascript技术中的callback函数、定时器、js动画以及结点思想。

    关于Javascript回调函数的一个妙用

    其实回调函数简单通俗点就是当有a和b两个函数,当a作为参数传给b,并在b中执行,这时a就是一个回调(callback)函数,如果a是一个匿名函数,则为匿名回调函数那下面们来通过一个实例来具体解释下Javascript回调函数怎么...

Global site tag (gtag.js) - Google Analytics