jQuery的deferred对象使用详解

这个功效很主要，将来将成为jQuery的焦点办法，它完全转变了若何在jQuery中应用ajax。为了实现它，jQuery的全体ajax代码都被改写了。

然则，它比拟抽象，初学者很难把握，网上的教程也未几。以是，我把本身的进修条记整顿出来了，愿望对年夜家有效。

本文不是低级教程，针对的读者是那些已具有jQuery应用履历的开辟者。假如你想懂得jQuery的根本用法，请浏览我编写的《jQuery计划思惟》和《jQuery最好实践》。

1、甚么是deferred工具？

开辟网站的进程中，我们常常碰到某些耗时很长的javascript操纵。个中，既有异步的操纵（好比ajax读取办事器数据），也有同步的操纵（好比遍历一个年夜型数组），它们都不是立刻能获得成果的。

平日的办理办法是，为它们指定回调函数（callback）。即事前划定，一旦它们运行停止，应当挪用哪些函数。

然则，在回调函数方面，jQuery的功效异常弱。为了转变这一点，jQuery开辟团队就计划了deferred工具。

简朴说，deferred工具就是jQuery的回调函数办理计划。 在英语中，defer的意思是"耽误"，以是deferred工具的寄义就是"耽误"到将来某个点再履行。

它办理了若何处置耗时操纵的题目，对那些操纵供给了更好的掌握，和同一的编程接口。它的重要功效，可以回结为四点。下面我们经由过程示例代码，一步步来进修。

2、ajax操纵的链式写法

jQuery的ajax操纵，传统写法是如许的：

$.ajax({

url: "test.html",

success: function(){

alert("哈哈，胜利了！");

},

error:function(){

alert("失足啦！");

}

});

（运行代码示例1）

在上面的代码中，$.ajax()接收一个工具参数，这个工具包括两个办法：success办法指定操纵胜利后的回调函数，error办法指定操纵掉败后的回调函数。

$.ajax()操纵完成后，假如应用的是低于1.5.0版本的jQuery，返回的是XHR工具，你没法举行链式操纵；假如高于1.5.0版本，返回的是deferred工具，可以举行链式操纵。

如今，新的写法是如许的：

$.ajax("test.html")

.done(function(){ alert("哈哈，胜利了！"); })

.fail(function(){ alert("失足啦！"); });

（运行代码示例2）

可以看到，done()相称于success办法，fail()相称于error办法。采取链式写法今后，代码的可读性年夜年夜进步。

3、指定统一操纵的多个回调函数

deferred工具的一年夜利益，就是它答应你自由添加多个回调函数。

照样以上面的代码为例，假如ajax操纵胜利后，除本来的回调函数，我还想再运行一个回调函数，怎样办？

很简朴，直接把它加在背面就好了。

$.ajax("test.html")

.done(function(){ alert("哈哈，胜利了！");} )

.fail(function(){ alert("失足啦！"); } )

.done(function(){ alert("第二个回调函数！");} );

（运行代码示例3）

回调函数可以添加随意率性多个，它们依照添加次序履行。

4、为多个操纵指定回调函数

deferred工具的另外一年夜利益，就是它答应你为多个事宜指定一个回调函数，这是传统写法做不到的。

请看下面的代码，它用到了一个新的办法$.when()：

$.when($.ajax("test1.html"), $.ajax("test2.html"))

.done(function(){ alert("哈哈，胜利了！"); })

.fail(function(){ alert("失足啦！"); });

（运行代码示例4）

这段代码的意思是，先履行两个操纵$.ajax("test1.html")和$.ajax("test2.html")，假如胜利了，就运行done()指定的回调函数；假如有一个掉败或都掉败了，就履行fail()指定的回调函数。

5、通俗操纵的回调函数接口（上）

deferred工具的最年夜长处，就是它把这一套回调函数接口，从ajax操纵扩大到了全部操纵。也就是说，任何一个操纵----不论是ajax操纵照样当地操纵，也不论是异步操纵照样同步操纵----都可使用deferred工具的各类办法，指定回调函数。

我们来看一个详细的例子。假定有一个很耗时的操纵wait：

var wait = function(){

var tasks = function(){

alert("履行终了！");

};

setTimeout(tasks,5000);

};

我们为它指定回调函数，应当怎样做呢？

很天然的，你会想到，可使用$.when()：

$.when(wait())

.done(function(){ alert("哈哈，胜利了！"); })

.fail(function(){ alert("失足啦！"); });

然则，有一个题目。$.when()的参数只能是deferred工具，以是必需对wait举行改写：

var dtd = $.Deferred(); // 新建一个deferred工具

var wait = function(dtd){

var tasks = function(){

alert("履行终了！");

dtd.resolve(); // 转变deferred工具的履行状况

};

setTimeout(tasks,5000);

return dtd.promise();

};

这里有两个处所须要留意。

起首，末了一行不克不及直接返回dtd，必需返回dtd.promise()。缘由是jQuery划定，随意率性一个deferred工具有三种履行状况----未完成，已完成和已掉败。假如直接返回dtd，$.when()的默许履行状况为"已完成"，立刻触发背面的done()办法，这就掉往回调函数的感化了。dtd.promise()的目标，就是包管今朝的履行状况----也就是"未完成"----稳定，从而确保只有操纵完成后，才会触发还调函数。

其次，当操纵完成后，必需手动转变Deferred工具的履行状况，不然回调函数没法触发。dtd.resolve()的感化，就是将dtd的履行状况从"未完成"酿成"已完成"，从而触发done()办法。

末了别忘了，修正完wait以后，挪用的时刻就必需直接传进dtd参数。

$.when(wait(dtd))

.done(function(){ alert("哈哈，胜利了！"); })

.fail(function(){ alert("失足啦！"); });

（运行代码示例5）

6、通俗操纵的回调函数接口（中）

除应用$.when()为通俗操纵添加回调函数，还可使用deferred工具的建构函数$.Deferred()。

这时候，wait函数照样坚持稳定，我们直接把它传进$.Deferred()：

$.Deferred(wait)

.done(function(){ alert("哈哈，胜利了！"); })

.fail(function(){ alert("失足啦！"); });

（运行代码示例6）

jQuery划定，$.Deferred()可以接收一个函数作为参数，该函数将在$.Deferred()返回成果之前履行。而且，$.Deferred()所天生的Deferred工具将作为这个函数的默许参数。

7、通俗操纵的回调函数接口（下）

除上面两种办法之外，我们还可以直接在wait工具上安排deferred接口。

var dtd = $.Deferred(); // 天生Deferred工具

var wait = function(dtd){

var tasks = function(){

alert("履行终了！");

dtd.resolve(); // 转变Deferred工具的履行状况

};

setTimeout(tasks,5000);

};

dtd.promise(wait);

wait.done(function(){ alert("哈哈，胜利了！"); })

.fail(function(){ alert("失足啦！"); });

wait(dtd);

（运行代码示例7）

这里的要害是dtd.promise(wait)这一行，它的感化就是在wait工具上安排Deferred接口。恰是由于有了这一行，背面能力直接在wait上面挪用done()和fail()。

8、小结：deferred工具的办法

前面已讲到了deferred工具的多种办法，下面做一个总结：

（1）$.Deferred()天生一个deferred工具。

（2）deferred.done()指定操纵胜利时的回调函数

（3）deferred.fail()指定操纵掉败时的回调函数

（4）deferred.promise()没有参数时，感化为坚持deferred工具的运行状况稳定；接收参数时，感化为在参数工具上安排deferred接口。

（5）deferred.resolve()手动转变deferred工具的运行状况为"已完成"，从而立刻触发done()办法。

（6）$.when()为多个操纵指定回调函数。

除这些办法之外，deferred工具另有三个主要办法，上面的教程中没有触及到。

（7）deferred.then()

偶然为了省事，可以把done()和fail()合在一路写，这就是then()办法。

$.when($.ajax( "/main.php" ))

.then(successFunc, failureFunc );

假如then()有两个参数，那末第一个参数是done()办法的回调函数，第二个参数是fail()办法的回调办法。假如then()只有一个参数，那末同等于done()。

（8）deferred.reject()

这个办法与deferred.resolve()恰好相反，挪用后将deferred工具的运行状况变成"已掉败"，从而立刻触发fail()办法。

（9）deferred.always()

这个办法也是用来指定回调函数的，它的感化是，不管挪用的是deferred.resolve()照样deferred.reject()，末了老是履行。

$.ajax( "test.html" )

.always( function() { alert("已履行！");} );

（完）