jQuery.deferred对象使用详解

一、前言
jQuery1.5之前，如果需要多次Ajax操作，我们一般会使用下面的两种方式：

1).串行调用Ajax

$.ajax({ success: function() { 
  $.ajax({ success: function() {
    $.ajax({ //callbacks... 
        }); 
  }); 
});  

这种方式代码可读性差，效率低，晦涩难懂，调试和排错的复杂度大。

2).并行调用Ajax

var promises = []; 
$.ajax({
  success: function() { 
    promises.push('resolved'); 
    check(); 
  } 
}); 
$.ajax({ 
  success: function() { 
    promises.push('resolved'); 
    check();
  } 
}); 
$.ajax({ 
  success: function() { 
    promises.push('resolved'); 
    check(); 
  } 
}); 
var check = function() { //checks for all 3 values in the promises array }

这种方式对于callbacks函数调用来说已经很不错了，并行取得数据，可读性良好。缺点就是代码冗长，可扩展性差，调试和排错的复杂度高。

jQuery1.5之后，增加了deferred对象。因此可以用下面这种方式实现和上面同样的需求。

1）Promise

var address = $.ajax({}); 
var tweets = $.ajax({}); 
var facebook = $.ajax({}); 
render_side_bar = function(address, tweets, facebook){ 
  //render sidebar 
}
render_no_side_bar = function () { }
$.when(address, tweets, facebook).then(render_side_bar, render_no_side_bar)

可以看出，代码可读性良好，可扩展性高，并且大大降低了调试和排错的复杂度。

那么问题来了，promises和deferred对象究竟是个什么玩意呢？

二、详解
2.什么是deferred对象？
deferred对象即延迟对象，它是jQuery 1.5版本引入的一种回调函数的解决方案，代表了将要完成的某种操作，并且提供了一些方法，帮助用户使用。

deferred对象是对Promises接口的实现。jQuery 1.5版本以及之后所有的Ajax返回的jqXHR对象就是一个deferred对象。

2.deferred对象的几大好处
2.1.为同一操作指定多个回调函数
deferred对象的好处之一，就是它允许你为一个操作添加多个回调函数，这在传统的ajax中是无法实现的。

$.ajax("test.html")
　　.done(function(){ alert("first success callback!");} )
　　.fail(function(){ alert("there is an error!"); } )
　　.done(function(){ alert("second success callback!");} );

2.2.为多个操作指定同一个回调函数
deferred对象的好处之二，就是它允许你为多个操作指定同一个回调函数，这在传统的ajax中也是无法实现的。

$.when($.ajax({}), $.ajax({}))
　　.done(function(){ alert("success!"); })
　　.fail(function(){ alert("error!"); });

2.3.非Ajax操作的回调函数
deferred对象的好处之三，就是它不再拘泥于ajax操作，任意的操作(ajax操作or本地操作/异步操作or同步操作)都可以使用deferred对象，指定回调函数。

一个很典型的耗时操作

var dfd = $.Deferred(); // create a deferred object
　　var wait = function(dtd){
　　　　var tasks = function(){
　　　　　　alert("over!");
　　　　　　dtd.resolve(); // change the state of the deferred object from pending to resolved
　　　　};
　　　　setTimeout(tasks,50000);
　　　　return dtd;
　　};

$.when(wait(dtd))
　　.done(function(){ alert("success!"); })
　　.fail(function(){ alert("error!"); });

2.4.链式调用
jQuery中传统的ajax操作是这样的：

$.ajax({
  url: "",
　　 success: function(){
　　　　alert("success!");
　　　},
　　　error:function(){
　　　　alert("error!");
　　　}
});

其中success指定ajax操作成功后的回调函数，error指定ajax操作失败后的回调函数。jQuery1.5版本之前，Ajax操作返回的是一个XMLHTTPRequest对象，不支持链式操作。1.5版本开始，ajax操作返回的是jqXHR对象，这是一个deferred对象，而deferred对象一个显著的好处就是可以进行链式操作，因为deferred对象的所有方法返回的均是deferred对象。

现在的ajax操作的写法是：

$.ajax({})
　　.done(function(){ alert("success!"); })
　　.fail(function(){ alert("fail!"); });

两种写法对比可以很明显的看出来，done()相当于传统ajax操作的success方法，fail()相当于传统ajax操作的fail方法。相对于传统的写法，代码可读性提高了。

3.deferred对象的方法
3.1基本用法
(1).生成deferred对象

var dfd = $.Deferred(); //create a deferred object
(2).deferred对象的状态

deferred对象有三种状态

pending：表示操作处于未完成的状态，任何deferred(延迟)对象开始于pending状态。
resolved：表示操作成功。
rejected：表示操作失败。
state()方法返回deferred对象的当前状态。

$.Deferred().state(); // 'pending'
$.Deferred().resolve().state(); // 'resolved'
$.Deferred().reject().state(); // 'rejected'

(3).改变deferred对象的状态

调用deferred.resolve() 或者 deferred.resolveWith()转换Deferred（递延）到resolved（解决）的状态，并立即执行设置中任何的doneCallbacks。

var callbackFunc = function(){console.log(arguments[0]);}
var dfd = $.Deferred();
dfd.done(callbackFunc);
dfd.resolve("hello"); //'hello'

调用deferred.reject() 或者 deferred.rejectWith()转换Deferred（递延）到rejected（拒绝）的状态，并立即执行设置中任何的failCallbacks。

var callbackFunc = function(){console.log(arguments[0]);}
var dfd = $.Deferred();
dfd.fail(callbackFunc);
dfd.reject("fail"); //'fail'

(4).绑定回调函数

deferred对象状态改变的时候，会触发回调函数。任何回调使用deferred.then(), deferred.always(), deferred.done()或者 deferred.fail()添加到这个对象都是排队等待执行。

pending-->resolved，执行设置中任何的doneCallbacks(done()指定)，参数由resolved传递给doneCallbacks。
pending-->rejected，执行设置中任何的failCallbacks(fail()指定)，参数由resolved传递给failCallbacks。
pending-->resolved/rejected,执行always()指定的callbacks，参数由resolved传递给callbacks。

var f1 = function(){console.log("done");}, 
   f2 = function(){console.log("fail");}, 
   f3 = function(){console.log("always");};

var dfd = $.Deferred();
dfd.done(f1).fail(f2).always(f3);

//if
dfd.resolve(); //'done' 'always'
//if
dfd.reject(); //'fail' 'always'

如果在状态更改后附件一个callback则会立即执行callback，因此不必担心deferred对象何时被resolved或者rejected，因为无论何时，参数都会正确地传递给callbacks。

var fun1 = function(){console.log(arguments[0]);},
  fun1 = function(){console.log(arguments[0]);};
var dfd = $.Deferred();
dfd.done(fun1);
dfd.resolve("hello"); //'hello'
dfd.done(fun2); //'hello'

3.2.deferred对象的方法
(1)$.Deferred([beforeStart]) -- 创建一个deferred对象，参数类型为Function，是一个在构造函数之前调用的函数。

var func = function(){console.log("start");} 
var dfd = $.Deferred(func); //'start' create a deferred object

(2)deferred.done(doneCallbacks [,doneCallbacks]) -- 当deferred(延迟)对象解决时，调用添加处理程序。

args:接受一个或者多个参数，所有的参数都可以是一个单一的函数或者函数数组，当deferred(延迟)对象解决时，doneCallbacks被调用。回调是依照他们添加的顺序执行的。

var func1 = function(){console.log("1");},
   func2 = function(){console.log("2");},
   func3 = function(){console.log("3");};
var dfd = $.Deferred();
dfd.done([func1,func2],func3,[func2,func1]);
dfd.resolve(); // "1 2 3 2 1"

(3)deferred.fail(failCallbacks [,failCallbacks]) -- 当deferred(延迟)对象拒绝时，调用添加处理程序。

args:接受一个或者多个参数，所有的参数都可以是一个单一的函数或者函数数组，当deferred(延迟)对象拒绝时，failCallbacks被调用。回调是依照他们添加的顺序执行的。