jQuery Deferred模块详解-js-Tutorial-php.cn

什么Deferred

根据jQuery的官方api文档的描述: jQuery.Deferred()是可链式调用的工具对象, 它能够注册回调函数到一个队列中, 依次调用该队列中的回调函数,并且能够将调链中上一个函数(同步或者异步)的返回状态传递到下一个回调函数中.

jQuery.Deferred()背后的设计理念来自CommonJS Promises/A , jQuery.Deferred()基于这个理念实现，但并没有完全遵循其设计。其它语言或者框架，例如python和dojo中都有类似的实现。

下面简单介绍一下 “Promises”的设计思想，目的在于下文介绍jQuery.Deferred()的API时，让大家能有一个理论上的了解。

Promise, 中文可以理解为愿望，代表单个操作完成的最终结果。一个Promise拥有三种状态：分别是unfulfilled(未满足的）、fulfilled（满足的）、failed（失败的），fulfilled状态和failed状态都可以被监听。一个愿望可以从未满足状态变为满足或者失败状态，一旦一个愿望处于满足或者失败状态，其状态将不可再变化。这种“不可改变”的特性对于一个Promise来说非常的重要，它可以避免Promise的状态监听器修改一个Promise的状态导致别的监听器的行为异常。例如：一个监听fulfilled状态的监听器把Promise的状态修改为failed，那么将触发failed状态的监听器，而如果一个failed状态监听器又把Promise的状态设置为fulfilled，那么又将触发fulfilled状态的监听器，这样将导致死循环。另外一种理解Promise这种特性的方式是把Promise看成是javascript中的primative类型的变量，这种变量可以被传入被调用的函数中，但是不可以被调用函数所改变。

每一个Promise对象都有一个方法：then(fulfilledHandler, errorHandler, progressHandler)，用于监听一个Promise的不同状态。fulfilledHandler用于监听fulfilled事件，errorHandler用于监听failed事件，progressHandler用于监听progress事件。一个Promise不强制实现progress状态的事件监听（jQuery的Deferred就是一个Promise的实现，但没有实现对progress状态事件的处理）。

then(...)函数中的fulfilledHandler和errorHandler的返回值是一个新的Promise对象, 以便能够链式调用then(...)函数。每一个回调函数在正常情况下返回的是处于fulfilled状态的Promise，如果该回调函数返回错误值，那么返回的Promise状态将会变为failed。

【疑惑：】以上对于Promise的介绍基本由英文原文翻译而来。感觉英文原文中的描述有点矛盾。例如前面说一个Promise的状态只能从unfulfilled变为fulfilled或者failed，可是又在后面说一个回调函数如果失败，将会把一个Promise从fulfilled状态变为failed状态。还请读者阅读原文自行甄别。

幸好jQuery的Promise实现, Deferred，要清晰的多。下面将详细介绍jQuery.Deferred()的API。

Deferred API介绍

1. 构造函数

<code class="language-javascript">//方式一：  
var deferred = $.Deferred();  
//方式二：使用new操作符号，一般不这样做，显得冗余  
var deferred = new $.Deferred();  
//方式三：传入一个函数作为回调函数，这个函数会在构造的Deferred对象返回前执行。该函数被传入要返回的Deferred对象作为参数  
//在函数内部this指向要返回的Deferred对象。  
var dfd = new $.Deferred(function(newDeferred){  
    this.then(function(){console.log("new deferred");});  
});  </code>

Nach dem Login kopieren

2. deferred.promise() 和 .promise()

这两个API语法几乎一样，但是有着很大的差别。deferred.promise()是Deferred实例的一个方法，他返回一个Deferred.Promise实例。一个Deferred.Promise对象可以理解为是deferred对象的一个视图，它只包含deferred对象的一组方法，包括：done(),then(),fail(),isResolved(), isRejected(), always(),这些方法只能观察一个deferred的状态，而无法更改deferred对象的内在状态。这非常适合于API的封装。例如一个deferred对象的持有者可以根据自己的需要控制deferred状态的状态（resolved或者rejected），但是可以把这个deferred对象的Promise对象返回给其它的观察者，观察者只能观察状态的变化绑定相应的回调函数，但是无法更改deferred对象的内在状态，从而起到很好的隔离保护作用。

<code class="language-javascript">$(function(){  
    //  
    var deferred = $.Deferred();  
    var promise = deferred.promise();  
      
    var doSomething = function(promise) {  
        promise.done(function(){  
            alert('deferred resolved.');  
        });  
    };  
      
    deferred.resolve();  
    doSomething(promise);  
})  
</code>

Nach dem Login kopieren

deferred.promise()也可以接受一个object参数，此时传入的object将被赋予Promise的方法，并作为结果返回。

<code class="language-javascript">// Existing object  
var obj = {  
  hello: function( name ) {  
    alert( "Hello " + name );  
  }  
},  
// Create a Deferred  
defer = $.Deferred();  
  
// Set object as a promise  
defer.promise( obj );  
  
// Resolve the deferred  
defer.resolve( "John" );  
  
// Use the object as a Promise  
obj.done(function( name ) {  
  this.hello( name ); // will alert "Hello John"  
}).hello( "Karl" ); // will alert "Hello Karl" </code>

Nach dem Login kopieren

接下来介绍.promise()方法。

首先这不是Deferred实例的方法！该方法是jQuery实例的方法。该方法用于一组类型的动作（例如动画）全部完成后返回一个Promise对象，供事件监听器监听其状态并执行相应的处理函数。

该方法接受两个可选参数：.promise( [type,] [target] )

type：队列的类型，默认值是fx，fx即jQuery对象的动画.
targetObject ：要赋予Promise行为的对象，

这两个参数是可选的。其中第一个参数（我）目前除了fx还没有找到其他的值类型。因此一般都是用于动画的监控，在动画完成后做一些操作。

例子：没有动画效果直接返回一个resolved状态的promise对象

<code class="language-javascript">var div = $( "<div></div>" );  
  
div.promise().done(function( arg1 ) {  
  // 将会被马上触发  
  alert( this === div && arg1 === div );  
});  </code>

Nach dem Login kopieren

例子：在动画效果全部完成后触发done()监听函数

<code class="language-javascript">  
  
  
  <style>  
div {  
  height: 50px; width: 50px;  
  float: left; margin-right: 10px;  
  display: none; background-color: #090;  
}  
</style>  
  <script src="http://code.jquery.com/jquery-latest.js"></script>  
  
  
    
<button>Go</button>  
<p>Ready...</p>  
<div></div>  
<div></div>  
<div></div>  
<div></div>  
<script>  
$("button").bind( "click", function() {  
  $("p").append( "Started...");  
  //每个div执行动画效果  
  $("div").each(function( i ) {  
    $( this ).fadeIn().fadeOut( 1000 * (i+1) );  
  });  
  //$("div")包含一组div，在所有的div都完成自己的动画效果后触发done()函数  
  $( "div" ).promise().done(function() {  
    $( "p" ).append( " Finished! " );  
  });  
});  
</script>  
  
  
  </code>

Nach dem Login kopieren

3. deferred.then()

用于给一个deferred对象添加监听器。该方法接受两个参数：

deferred.then( doneCallbacks, failCallbacks )

doneCallbacks: 一个函数，或者是一组函数，在deferred被实现时调用
failCallbacks: 一个函数，或者是一组函数，在deferred被拒绝时调用

例子：

<code class="language-javascript">$.get("test.php").then(  
    function(){ alert("$.get succeeded"); },  
    function(){ alert("$.get failed!"); }  
);  </code>

Nach dem Login kopieren

deferred.then()提供了一种方便的写法，让一个deferred在实现或者被拒绝时的监听函数可以写在一个api中。

4. deferred.done()

用于添加deferred被实现时的监听函数。该方法可以接收一到多个参数，每个参数都是一个函数或者一组函数。

例子：

<code class="language-javascript">$(function(){  
    var dfd = $.Deferred();  
    var func1 = function() {alert("1");};  
    var func2 = function() {alert("2");};  
      
    dfd.done(func1, [func1, func2], func2);  
    dfd.resolve();  
})  </code>

Nach dem Login kopieren

5. deferred.fail()

用于添加deferred失败时的监听函数。该方法可以接收一到多个参数，每个参数都是一个函数或者一组函数。

<code class="language-javascript">$(function(){  
    var dfd = $.Deferred();  
    var func1 = function() {alert("1");};  
    var func2 = function() {alert("2");};  
      
    dfd.fail(func1, [func1, func2], func2);  
               //调用reject方法触发fail事件处理函数  
    dfd.reject();  
})  </code>

Nach dem Login kopieren

6. deferred.reject() 和 deferred.rejectWith()

这两个方法将一个Deferred对象的状态由未实现置为失败状态，将触发该deferred的fail回调函数。如果deferred的状态已经是“已实现”，那么将不生效。

reject函数可以接收一个参数，用于传给deferred的failCallback。而deferred.rejectWith()额外接受一个参数context，作为在fail回调函数中this的值。

例子：deferred.reject([args])

见5中的例子。

例子：deferred.rejectWith()，指定context

<code class="language-javascript">$(function(){  
    var dfd = $.Deferred();  
    dfd.fail(function(cause){  
        console.log(cause);  
        console.log(this.name);  
    });  
      
    dfd.rejectWith({name: 'demo'}, ["invalid input!"]);  
})   </code>

Nach dem Login kopieren

Deferred的应用

1）与$.when()一起调用

$.when()提供了一种根据Defererred对象的状态来执行回调函数的办法。它接受一个或者多个Defeered对象。

<code class="language-javascript">$(function(){  
     $.when($.ajax('test.html')).then(function(data, textStatus, jqXHR){  
         console.log(data);  
     },function(){  
         alert('failure');  
     })  
});  </code>

Nach dem Login kopieren

在只使用一个参数的情况下，$.when()和直接使用Deferred对象没有什么区别，它也返回一个Deferred对象。$.when()更大的作用在于使用多个Defeered对象时，此时$.when()返回一个包含所有Deferred状态的超级Deferred对象。并且如果有一个Deferred失败，那么这个超级Deferred的状态将为failed，只有在所有Deferred对象都实现时，返回的超级Deferred对象状态才为resolved。

<code class="language-javascript">$(function(){  
                //假设test.html不存在，那么将调用fail回调函数，弹出alert对话框  
     $.when($.ajax('test.html'), $.ajax('test.html')).then(function(args1,args2){  
         console.log(args1);  
     },function(){  
         alert('failure');  
     })  
});  </code>

Nach dem Login kopieren

这非常适用于以下的业务场景：当一个回调函数需要依赖多个ajax请求取回数据才能被触发的情况。