這篇文章主要介紹了jQuery中Deferred的deferred.promise()方法,提醒千萬要注意deferred.promise()與jQuery的.promise() 實例方法的區(qū)別,需要的朋友可以參考下

deferred.promise() 和 .promise()

這兩個API語法幾乎一樣，但是有著很大的差別。deferred.promise()是Deferred實例的一個方法，他返回一個Deferred.Promise實例。一個Deferred.Promise對象可以理解為是deferred對象的一個視圖，它只包含deferred對象的一組方法，包括：done(),then(),fail(),isResolved(), isRejected(), always(),這些方法只能觀察一個deferred的狀態(tài)，而無法更改deferred對象的內(nèi)在狀態(tài)。這非常適合于API的封裝。例如一個deferred對象的持有者可以根據(jù)自己的需要控制deferred狀態(tài)的狀態(tài)（resolved或者rejected），但是可以把這個deferred對象的Promise對象返回給其它的觀察者，觀察者只能觀察狀態(tài)的變化綁定相應(yīng)的回調(diào)函數(shù)，但是無法更改deferred對象的內(nèi)在狀態(tài)，從而起到很好的隔離保護作用。

deferred.promise()

$(function(){ 

  // 

  var deferred = $.Deferred(); 

  var promise = deferred.promise(); 

  var doSomething = function(promise) { 

    promise.done(function(){ 

      alert('deferred resolved.'); 

    }); 

  }; 

  deferred.resolve(); 

  doSomething(promise); 

}) 

deferred.promise()也可以接受一個object參數(shù)，此時傳入的object將被賦予Promise的方法，并作為結(jié)果返回。

// 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" 

deferred.promise() 只是阻止其他代碼來改變這個 deferred 對象的狀態(tài)。可以理解成，通過 deferred.promise() 方法返回的 deferred promise 對象，是沒有 resolve ,reject, progress , resolveWith, rejectWith , progressWith 這些可以改變狀態(tài)的方法，你只能使用 done, then ,fail 等方法添加 handler 或者判斷狀態(tài)。

deferred.promise() 改變不了 deferred 對象的狀態(tài)，作用也不是保證目前的狀態(tài)不變，它只是保證你不能通過 deferred.promise() 返回的 deferred promise 對象改變 deferred 對象的狀態(tài)。如果我們這個地方直接返回 dtd，也是可以工作的，.done 的處理函數(shù)還是會等到 dtd.resolve() 之后才會執(zhí)行.

具體在那篇博客的例子, 如果我們把代碼改成如下的形式：

var dtd = $.Deferred(); // 新建一個deferred對象

var wait = function(dtd){

  var tasks = function(){

    alert("執(zhí)行完畢！");

    dtd.resolve(); // 改變deferred對象的執(zhí)行狀態(tài)

  };

  setTimeout(tasks,5000);

  return dtd;

};

$.when(wait(dtd))

.done(function(){ alert("哈哈，成功了！"); })

.fail(function(){ alert("出錯啦！"); });

這樣的執(zhí)行結(jié)果和先前返回 dtd.promise 的結(jié)果是一樣的。

差別在什么地方呢？如果我們把 $.when 的這塊的代碼改成這樣的：

var d = wait(dtd);

$.when(d)

.done(function(){ alert("哈哈，成功了！"); })

.fail(function(){ alert("出錯啦！"); });

d.resolve();

我們會發(fā)現(xiàn) alert(“哈哈，成功了！”) 會立即執(zhí)行，“執(zhí)行完畢”卻需要5秒后才彈出來。

但是如果我們 wait 函數(shù)最后是 return dtd.promise() 這里 d.resolve() 就會報錯了，因為對象 d 不存在 resolve() 方法。

同樣如果我們把代碼改成:

var dtd = $.Deferred(); // 新建一個deferred對象

var wait = function(dtd){

  var tasks = function(){

　　   alert("執(zhí)行完畢！");

　　   dtd.resolve(); // 改變deferred對象的執(zhí)行狀態(tài)

　　 };

　　 setTimeout(tasks,5000);

　　 return dtd.promise();

};

dtd.resolve();

$.when( wait(dtd))

.done(function(){ alert("哈哈，成功了！"); })

.fail(function(){ alert("出錯啦！"); });

我們也可以發(fā)現(xiàn) alert(“哈哈，成功了！”) 會立即執(zhí)行，因為 dtd 這個 deferred 對象在被傳入 wait 之前，已經(jīng)被 resolve() 了，而 deferred 對象一旦被 resolve 或者 reject 之后，狀態(tài)是不會改變的。

然后我們再把 $.wait 這塊的代碼改成:

$.when( wait(dtd))

.done(function(){ alert("哈哈，成功了！"); })

.fail(function(){ alert("出錯啦！"); });

dtd.resolve();

我們也會發(fā)現(xiàn) alert(“哈哈，成功了！”); 被立即執(zhí)行，雖然 wait(dtd) 執(zhí)行的時候， dtd 還沒有被 resolve，而且 wait 方法返回的是 dtd.promise(), 但是 dtd 這個原始的 deferred 對象是暴露在外面的，我們還是可以從外面改變它的狀態(tài)。

于是，如果我們真的不想讓其他代碼能改變 wait 方法內(nèi)部的 deferred 對象的狀態(tài)，那我們應(yīng)該寫成這樣：

var wait = function(){

  var dtd = $.Deferred(); // 新建一個deferred對象

  var tasks = function(){

    alert("執(zhí)行完畢！");

　　   dtd.resolve(); // 改變deferred對象的執(zhí)行狀態(tài)

　　 };

　　 setTimeout(tasks,5000);

　　 return dtd.promise();

};

$.when( wait())

.done(function(){ alert("哈哈，成功了！"); })

.fail(function(){ alert("出錯啦！"); });

也就是不要把 deferred 直接暴露出來，最后返回 deferred.promise() ，讓其他地方的代碼只能添加 handler 。

.promise()

首先這不是Deferred實例的方法！該方法是jQuery實例的方法。該方法用于一組類型的動作（例如動畫）全部完成后返回一個Promise對象，供事件監(jiān)聽器監(jiān)聽其狀態(tài)并執(zhí)行相應(yīng)的處理函數(shù)。

該方法接受兩個可選參數(shù)：.promise( [type,] [target] )

type：隊列的類型，默認值是fx，fx即jQuery對象的動畫. 

targetObject ：要賦予Promise行為的對象，

這兩個參數(shù)是可選的。其中第一個參數(shù)（我）目前除了fx還沒有找到其他的值類型。因此一般都是用于動畫的監(jiān)控，在動畫完成后做一些操作。

例子：沒有動畫效果直接返回一個resolved狀態(tài)的promise對象

var div = $( "<div />" ); 

div.promise().done(function( arg1 ) { 

 // 將會被馬上觸發(fā) 

 alert( this === div && arg1 === div ); 

}); 

例子：在動畫效果全部完成后觸發(fā)done()監(jiān)聽函數(shù)

<!DOCTYPE html> 

<html> 

<head> 

 <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> 

</head> 

<body> 

<button>Go</button> 

<p>Ready...</p> 

<div></div> 

<div></div> 

<div></div> 

<div></div> 

<script> 

$("button").bind( "click", function() { 

 $("p").append( "Started..."); 

 //每個div執(zhí)行動畫效果 

 $("div").each(function( i ) { 

  $( this ).fadeIn().fadeOut( 1000 * (i+1) ); 

 }); 

 //$("div")包含一組div，在所有的div都完成自己的動畫效果后觸發(fā)done()函數(shù) 

 $( "div" ).promise().done(function() { 

  $( "p" ).append( " Finished! " ); 

 }); 

}); 

</script> 

</body> 

</html>