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對象的內在狀態，從而起到很好的隔離保護作用。
deferred.promise()
$(function(){ // var deferred = $.Deferred(); var promise = deferred.promise(); var doSomething = function(promise) { promise.done(function(){ alert('deferred resolved.'); }); }; deferred.resolve(); doSomething(promise); }) // 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 對象的狀態?？梢岳斫獬桑ㄟ^ deferred.promise() 方法返回的 deferred promise 對象，是沒有 resolve ,reject, progress , resolveWith, rejectWith , progressWith 這些可以改變狀態的方法，你只能使用 done, then ,fail 等方法添加 handler 或者判斷狀態。
deferred.promise() 改變不了 deferred 對象的狀態，作用也不是保證目前的狀態不變，它只是保證你不能通過 deferred.promise() 返回的 deferred promise 對象改變 deferred 對象的狀態。如果我們這個地方直接返回 dtd，也是可以工作的，.done 的處理函數還是會等到 dtd.resolve() 之后才會執行.
具體在那篇博客的例子, 如果我們把代碼改成如下的形式：
var dtd = $.Deferred(); // 新建一個deferred對象var wait = function(dtd){ var tasks = function(){ alert("執行完畢！"); dtd.resolve(); // 改變deferred對象的執行狀態 }; setTimeout(tasks,5000); return dtd;};$.when(wait(dtd)).done(function(){ alert("哈哈，成功了！"); }).fail(function(){ alert("出錯啦！"); });這樣的執行結果和先前返回 dtd.promise 的結果是一樣的。
差別在什么地方呢？如果我們把 $.when 的這塊的代碼改成這樣的：
var d = wait(dtd);$.when(d).done(function(){ alert("哈哈，成功了！"); }).fail(function(){ alert("出錯啦！"); });d.resolve();我們會發現 alert(“哈哈，成功了！”) 會立即執行，“執行完畢”卻需要5秒后才彈出來。
但是如果我們 wait 函數最后是 return dtd.promise() 這里 d.resolve() 就會報錯了，因為對象 d 不存在 resolve() 方法。
同樣如果我們把代碼改成:
var dtd = $.Deferred(); // 新建一個deferred對象var wait = function(dtd){ var tasks = function(){ alert("執行完畢！"); dtd.resolve(); // 改變deferred對象的執行狀態 }; setTimeout(tasks,5000); return dtd.promise();};dtd.resolve();$.when( wait(dtd)).done(function(){ alert("哈哈，成功了！"); }).fail(function(){ alert("出錯啦！"); });我們也可以發現 alert(“哈哈，成功了！”) 會立即執行，因為 dtd 這個 deferred 對象在被傳入 wait 之前，已經被 resolve() 了，而 deferred 對象一旦被 resolve 或者 reject 之后，狀態是不會改變的。
然后我們再把 $.wait 這塊的代碼改成:
$.when( wait(dtd)).done(function(){ alert("哈哈，成功了！"); }).fail(function(){ alert("出錯啦！"); });dtd.resolve();我們也會發現 alert(“哈哈，成功了！”); 被立即執行，雖然 wait(dtd) 執行的時候， dtd 還沒有被 resolve，而且 wait 方法返回的是 dtd.promise(), 但是 dtd 這個原始的 deferred 對象是暴露在外面的，我們還是可以從外面改變它的狀態。
于是，如果我們真的不想讓其他代碼能改變 wait 方法內部的 deferred 對象的狀態，那我們應該寫成這樣：
var wait = function(){ var dtd = $.Deferred(); // 新建一個deferred對象 var tasks = function(){ alert("執行完畢！"); dtd.resolve(); // 改變deferred對象的執行狀態 }; setTimeout(tasks,5000); return dtd.promise();};$.when( wait()).done(function(){ alert("哈哈，成功了！"); }).fail(function(){ alert("出錯啦！"); });也就是不要把 deferred 直接暴露出來，最后返回 deferred.promise() ，讓其他地方的代碼只能添加 handler 。
.promise()
首先這不是Deferred實例的方法！該方法是jQuery實例的方法。該方法用于一組類型的動作（例如動畫）全部完成后返回一個Promise對象，供事件監聽器監聽其狀態并執行相應的處理函數。
該方法接受兩個可選參數：.promise( [type,] [target] )
type：隊列的類型，默認值是fx，fx即jQuery對象的動畫.
targetObject ：要賦予Promise行為的對象，
這兩個參數是可選的。其中第一個參數（我）目前除了fx還沒有找到其他的值類型。因此一般都是用于動畫的監控，在動畫完成后做一些操作。
例子：沒有動畫效果直接返回一個resolved狀態的promise對象
var div = $( "<div />" ); div.promise().done(function( arg1 ) { // 將會被馬上觸發 alert( this === div && arg1 === div ); }); 例子：在動畫效果全部完成后觸發done()監聽函數
<!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執行動畫效果 $("div").each(function( i ) { $( this ).fadeIn().fadeOut( 1000 * (i+1) ); }); //$("div")包含一組div，在所有的div都完成自己的動畫效果后觸發done()函數 $( "div" ).promise().done(function() { $( "p" ).append( " Finished! " ); }); }); </script> </body> </html> 新聞熱點
疑難解答
