javascript的回调函数详解

发布时间:2019-08-18编辑:脚本学堂
本文介绍下javascript中的回调函数,在javascript中回调函数非常重要,它们几乎无处不在。有需要的朋友,建议参考下本文的内容。

 1、回调函数

    首先,要清楚地明白函数的规则。在javascript中,函数是比较奇怪的,但它确实是对象。
    或者说,函数是用Function()构造函数创建的Function对象。
    Function对象包含一个字符串,字符串包含函数的javascript代码。
    对于javascript而言,数据和代码之间的区别是很模糊的。

    例子,
    

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

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

  2、传递函数作为回调

  把一个函数作为参数传递。
 

复制代码 代码示例:

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之间的随机数

  为何不正常地返回结果?但是当遇上必须使用回调函数之时,你也许就不这样认为了!

  3、别挡道

  传统函数以参数形式输入数据,并且使用返回语句返回值。理论上,在函数结尾处有一个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中的回调函数,脚本学堂,祝大家学习进步。