抽象來說彻秆，deferreds 可以理解為表示需要長時間才能完成的耗時操作的一種方式，相比于阻塞式函數它們是異步的结闸，而不是阻塞應用程序等待其完成然后返回結果唇兑。deferred對 象會立即返回，然后你可以把回調函數綁定到deferred對象上桦锄，它們會在異步處理完成后被調用扎附。
Promise
　　你可能已經閱讀過一些關于promise和deferreds實現(xiàn)細節(jié)的資料。在本章節(jié)中结耀，我們大致介紹下promise如何工作留夜，這些在幾乎所有的支持deferreds的javascript框架中都是適用的。
　　一般情況下图甜，promise作為一個模型碍粥，提供了一個在軟件工程中描述延時（或將來）概念的解決方案。它背后的思想我們已經介紹過：不是執(zhí)行一個方法然后阻塞應用程序等待結果返回黑毅，而是返回一個promise對象來滿足未來值即纲。
　　舉一個例子會有助于理解，假設你正在建設一個web應用程序博肋， 它很大程度上依賴第三方api的數據。那么就會面臨一個共同的問題：我們無法獲悉一個API響應的延遲時間蜂厅，應用程序的其他部分可能會被阻塞匪凡，直到它返回 結果。Deferreds 對這個問題提供了一個更好的解決方案掘猿，它是非阻塞的病游，并且與代碼完全解耦 。
　　Promise/A提議’定義了一個’then‘方法來注冊回調，當處理函數返回結果時回調會執(zhí)行衬衬。它返回一個promise的偽代碼看起來是這樣的：
promise = callToAPI( arg1, arg2, ...);
promise.then(function( futureValue ) {
/* handle futureValue /
});
promise.then(function( futureValue ) {
/ do something else */
});

此外买猖，promise回調會在處于以下兩種不同的狀態(tài)下執(zhí)行：
resolved：在這種情況下，數據是可用
rejected：在這種情況下滋尉，出現(xiàn)了錯誤玉控，沒有可用的值

幸運的是，'then'方法接受兩個參數：一個用于promise得到了解決（resolved）狮惜，另一個用于promise拒絕（rejected）高诺。讓我們回到偽代碼：
promise.then( function( futureValue ) {
/* we got a value /
} , function() {
/ something went wrong */
} );

在某些情況下，我們需要獲得多個返回結果后碾篡，再繼續(xù)執(zhí)行應用程序（例如虱而，在用戶可以選擇他們感興趣的選項前，顯示一組動態(tài)的選項）开泽。這種情況下牡拇，'when'方法可以用來解決所有的promise都滿足后才能繼續(xù)執(zhí)行的場景。
when(
promise1,
promise2,
...
).then(function( futureValue1, futureValue2, ... ) {
/* all promises have completed and are resolved */
});

一個很好的例子是這樣一個場景穆律，你可能同時有多個正在運行的動畫惠呼。 如果不跟蹤每個動畫執(zhí)行完成后的回調，很難做到在動畫完成后執(zhí)行下一步任務众旗。然而使用promise和‘when’方式卻可以很直截了當的表示： 一旦動畫執(zhí)行完成罢杉，就可以執(zhí)行下一步任務。最終的結果是我們可以可以簡單的用一個回調來解決多個動畫執(zhí)行結果的等待問題贡歧。 例如：
when( function(){
/* animation 1 /
/ return promise 1 /
}, function(){
/ animation 2 /
/ return promise 2 /
} ).then(function(){
/ once both animations have completed we can then run our additional logic */
});

這意味著滩租，基本上可以用非阻塞的邏輯方式編寫代碼并異步執(zhí)行。 而不是直接將回調傳遞給函數利朵，這可能會導致緊耦合的接口律想，通過promise模式可以很容易區(qū)分同步和異步的概念。
　　在下一節(jié)中绍弟，我們將著眼于jQuery實現(xiàn)的deferreds技即，你可能會發(fā)現(xiàn)它明顯比現(xiàn)在所看到的promise模式要簡單绪杏。
jQuery的Deferreds
　　jQuery在1.5版本中首次引入了deferreds楚堤。它 所實現(xiàn)的方法與我們之前描述的抽象的概念沒有大的差別。原則上糖声，你獲得了在未來某個時候得到‘延時’返回值的能力豹悬。在此之前是無法單獨使用的葵陵。 Deferreds 作為對ajax模塊較大重寫的一部分添加進來，它遵循了CommonJS的promise/ A設計瞻佛。1.5和先前的版本包含deferred功能脱篙，可以使$.ajax() 接收調用完成及請求出錯的回調，但卻存在嚴重的耦合。開發(fā)人員通常會使用其他庫或工具包來處理延遲任務绊困。新版本的jQuery提供了一些增強的方式來管理 回調文搂，提供更加靈活的方式建立回調，而不用關心原始的回調是否已經觸發(fā)秤朗。 同時值得注意的是煤蹭，jQuery的遞延對象支持多個回調綁定多個任務，任務本身可以既可以是同步也可以是異步的川梅。
　　您可以瀏覽下表中的遞延功能疯兼，有助于了解哪些功能是你需要的：

jQuery.Deferred（）
創(chuàng)建一個新的Deferred對象的構造函數，可以帶一個可選的函數參數贫途，它會在構造完成后被調用吧彪。

jQuery.when（）
通過該方式來執(zhí)行基于一個或多個表示異步任務的對象上的回調函數

jQuery.ajax（）
執(zhí)行異步Ajax請求，返回實現(xiàn)了promise接口的jqXHR對象

deferred.then（resolveCallback丢早，rejectCallback）
添加處理程序被調用時姨裸，遞延對象得到解決或者拒絕的回調。

deferred.done（）
當延遲成功時調用一個函數或者數組函數.

deferred.fail（）
當延遲失敗時調用一個函數或者數組函數.怨酝。

deferred.resolve（ARG1傀缩，ARG2，...）
調用Deferred對象注冊的‘done’回調函數并傳遞參數

deferred.resolveWith（context农猬，args）
調用Deferred對象注冊的‘done’回調函數并傳遞參數和設置回調上下文

deferred.isResolved
確定一個Deferred對象是否已經解決赡艰。

deferred.reject（arg1，arg2斤葱，...）
調用Deferred對象注冊的‘fail’回調函數并傳遞參數

deferred.rejectWith（context慷垮，args）
調用Deferred對象注冊的‘fail’回調函數并傳遞參數和設置回調上下文

deferred.promise（）
返回promise對象，這是一個偽造的deferred對象：它基于deferred并且不能改變狀態(tài)所以可以被安全的傳遞

jQuery延時實現(xiàn)的核心是jQuery.Deferred：一個可以鏈式調用的構造函數揍堕。...... 需要注意的是任何deferred對象的默認狀態(tài)是unresolved料身， 回調會通過 .then() 或 .fail()方法添加到隊列，并在稍后的過程中被執(zhí)行衩茸。
　　下面這個$.when() 接受多個參數的例子
function successFunc(){ console.log( “success!” ); }
function failureFunc(){ console.log( “failure!” ); }

$.when(
$.ajax( "/main.php" ),
$.ajax( "/modules.php" ),
$.ajax( “/lists.php” )
).then( successFunc, failureFunc );

在$.when() 的實現(xiàn)中有趣的是芹血，它并非僅能解析deferred對象，還可以傳遞不是deferred對象的參數楞慈，在處理的時候會把它們當做deferred對象并立 即執(zhí)行回調（doneCallbacks）幔烛。 這也是jQuery的Deferred實現(xiàn)中值得一提的地方，此外囊蓝，deferred.then（）還為deferred.done和 deferred.fail（）方法在deferred的隊列中增加回調提供支持说贝。
　　利用前面介紹的表中提到的deferred功能，我們來看一個代碼示例慎颗。 在這里，我們創(chuàng)建一個非常基本的應用程序：通過$.get方法（返回一個promise）獲取一條外部新聞源（1）并且（2）獲取最新的一條回復俯萎。 同時程序還通過函數（prepareInterface（））實現(xiàn)新聞和回復內容顯示容器的動畫傲宜。
　　為了確保在執(zhí)行其他相關行為前，上面的這三個步驟確保完成夫啊，我們使用$.when()函卒。根據您的需要 .then()和.fail() 處理函數可以被用來執(zhí)行其他程序邏輯。
function getLatestNews() {
return $.get( “l(fā)atestNews.php”, function(data){
console.log( “news data received” );
$( “.news” ).html(data);
} );
}
function getLatestReactions() {
return $.get( “l(fā)atestReactions.php”, function(data){
console.log( “reactions data received” );
$( “.reactions” ).html(data);
} );
}

function prepareInterface() {
return $.Deferred(function( dfd ) {
var latest = $( “.news, .reactions” );
latest.slideDown( 500, dfd.resolve );
latest.addClass( “active” );
}).promise();
}

$.when(
getLatestNews(), getLatestReactions(), prepareInterface()
).then(function(){
console.log( “fire after requests succeed” );
}).fail(function(){
console.log( “something went wrong!” );
});

deferreds在ajax的幕后操作中使用并不意味著它們無法在別處使用撇眯。 在本節(jié)中报嵌，我們將看到在一些解決方案中，使用deferreds將有助于抽象掉異步的行為熊榛，并解耦我們的代碼锚国。
異步緩存
　　當涉及到異步任務，緩存可以是一個有點苛刻的玄坦，因為你必須確保對于同一個key任務僅執(zhí)行一次血筑。因此，代碼需要以某種方式跟蹤入站任務煎楣。 例如下面的代碼片段：
$.cachedGetScript( url, callback1 );
$.cachedGetScript( url, callback2 );

緩存機制需要確保 腳本不管是否已經存在于緩存豺总，只能被請求一次。 因此择懂，為了緩存系統(tǒng)可以正確地處理請求,我們最終需要寫出一些邏輯來跟蹤綁定到給定url上的回調喻喳。
　　值得慶幸的是，這恰好是deferred所實現(xiàn)的那種邏輯困曙，因此我們可以這樣來做：
var cachedScriptPromises = {};
$.cachedGetScript = function( url, callback ) {
if ( !cachedScriptPromises[ url ] ) {
cachedScriptPromises[ url ] = $.Deferred(function( defer ) {
$.getScript( url ).then( defer.resolve, defer.reject );
}).promise();
}
return cachedScriptPromises[ url ].done( callback );
};

代碼相當簡單：我們?yōu)槊恳粋€url緩存一個promise對象表伦。 如果給定的url沒有promise，我們創(chuàng)建一個deferred赂弓，并發(fā)出請求绑榴。 如果它已經存在我們只需要為它綁定回調。 該解決方案的一大優(yōu)勢是盈魁，它會透明地處理新的和緩存過的請求翔怎。 另一個優(yōu)點是一個基于deferred的緩存 會優(yōu)雅地處理失敗情況。 當promise以‘rejected’狀態(tài)結束的話杨耙，我們可以提供一個錯誤回調來測試：
　　$.cachedGetScript( url ).then( successCallback, errorCallback );
　　請記壮嗵住：無論請求是否緩存過，上面的代碼段都會正常運作珊膜！
通用異步緩存
　　為了使代碼盡可能的通用容握，我們建立一個緩存工廠并抽象出實際需要執(zhí)行的任務??：
$.createCache = function( requestFunction ) {
var cache = {};
return function( key, callback ) {
if ( !cache[ key ] ) {
cache[ key ] = $.Deferred(function( defer ) {
requestFunction( defer, key );
}).promise();
}
return cache[ key ].done( callback );
};
}

現(xiàn)在具體的請求邏輯已經抽象出來，我們可以重新寫cachedGetScript：
$.cachedGetScript = $.createCache(function( defer, url ) {
$.getScript( url ).then( defer.resolve, defer.reject );
});

每次調用createCache將創(chuàng)建一個新的緩存庫车柠，并返回一個新的高速緩存檢索函數√奘希現(xiàn)在塑猖，我們擁有了一個通用的緩存工廠，它很容易實現(xiàn)涉及從緩存中取值的邏輯場景谈跛。
圖片加載
　　另一個候選場景是圖像加載：確保我們不加載同一個圖像兩次羊苟，我們可能需要加載圖像。 使用createCache很容易實現(xiàn)：
$.loadImage = $.createCache(function( defer, url ) {
var image = new Image();
function cleanUp() {
image.onload = image.onerror = null;
}
defer.then( cleanUp, cleanUp );
image.onload = function() {
defer.resolve( url );
};
image.onerror = defer.reject;
image.src = url;
});

接下來的代碼片段如下：
$.loadImage( "my-image.png" ).done( callback1 );
$.loadImage( "my-image.png" ).done( callback2 );

無論image.png是否已經被加載感憾，或者正在加載過程中蜡励，緩存都會正常工作。
緩存數據的API響應
　　哪些你的頁面的生命周期過程中被認為是不可變的API請求阻桅，也是緩存完美的候選場景凉倚。 比如，執(zhí)行以下操作：
$.searchTwitter = $.createCache(function( defer, query ) {
$.ajax({
url: "http://search.twitter.com/search.json",
data: { q: query },
dataType: "jsonp",
success: defer.resolve,
error: defer.reject
});
});

程序允許你在Twitter上進行搜索嫂沉，同時緩存它們：
$.searchTwitter( "jQuery Deferred", callback1 );
$.searchTwitter( "jQuery Deferred", callback2 );

定時
　　基于deferred的緩存并不限定于網絡請求;它也可以被用于定時目的稽寒。
　　例如，您可能需要在網頁上給定一段時間后執(zhí)行一個動作输瓜，來吸引用戶對某個不容易引起注意的特定功能的關注或處理一個延時問題瓦胎。 雖然setTimeout適合大多數用例，但在計時器出發(fā)后甚至理論上過期后就無法提供解決辦法尤揣。 我們可以使用以下的緩存系統(tǒng)來處理：
var readyTime;
$(function() { readyTime = jQuery.now(); });
$.afterDOMReady = $.createCache(function( defer, delay ) {
delay = delay || 0;
$(function() {
var delta = $.now() - readyTime;
if ( delta >= delay ) { defer.resolve(); }
else {
setTimeout( defer.resolve, delay - delta );
}
});
});

新的afterDOMReady輔助方法用最少的計數器提供了domReady后的適當時機搔啊。 如果延遲已經過期，回調會被馬上執(zhí)行北戏。
同步多個動畫
　　動畫是另一個常見的異步任務范例负芋。 然而在幾個不相關的動畫完成后執(zhí)行代碼仍然有點挑戰(zhàn)性。盡管在jQuery1.6中才提供了在動畫元素上取得promise對象的功能嗜愈，但它是很容易的手動實現(xiàn)：
$.fn.animatePromise = function( prop, speed, easing, callback ) {
var elements = this;
return $.Deferred(function( defer ) {
elements.animate( prop, speed, easing, function() {
defer.resolve();
if ( callback ) {
callback.apply( this, arguments );
}
});
}).promise();
};

然后旧蛾，我們可以使用$.when()同步化不同的動畫：
var fadeDiv1Out = $( "#div1" ).animatePromise({ opacity: 0 }),
fadeDiv2In = $( "#div1" ).animatePromise({ opacity: 1 }, "fast" );

$.when( fadeDiv1Out, fadeDiv2In ).done(function() {
/* both animations ended */
});

我們也可以使用同樣的技巧，建立了一些輔助方法：
$.each([ "slideDown", "slideUp", "slideToggle", "fadeIn", "fadeOut", "fadeToggle" ],
function( _, name ) {
$.fn[ name + "Promise" ] = function( speed, easing, callback ) {
var elements = this;
return $.Deferred(function( defer ) {
elements[ name ]( speed, easing, function() {
defer.resolve();
if ( callback ) {
callback.apply( this, arguments );
}
});
}).promise();
};
});

然后想下面這樣使用新的助手代碼來同步動畫：
$.when(
$( "#div1" ).fadeOutPromise(),
$( "#div2" ).fadeInPromise( "fast" )
).done(function() {
/* both animations are done */
});

一次性事件
　　雖然jQuery提供你可能需要的所有的時間綁定方法蠕嫁，但當事件僅需要處理一次時锨天，情況可能會變得有點棘手。（ 與$.one() 不同 )
　　例如剃毒，您可能希望有一個按鈕病袄，當它第一次被點擊時打開一個面板，面板打開之后赘阀，執(zhí)行特定的初始化邏輯益缠。 在處理這種情況時，人們通常會這樣寫代碼：
var buttonClicked = false;
$( "#myButton" ).click(function() {
if ( !buttonClicked ) {
buttonClicked = true;
initializeData();
showPanel();
}
});

不久后基公，你可能會在面板打開之后點擊按鈕時添加一些操作幅慌，如下：
if ( buttonClicked ) { /* perform specific action */ }

這是一個非常耦合的解決辦法。 如果你想添加一些其他的操作轰豆，你必須編輯綁定代碼或拷貝一份胰伍。 如果你不這樣做齿诞，你唯一的選擇是測試buttonClicked。由于buttonClicked可能是false骂租，新的代碼可能永遠不會被執(zhí)行掌挚，因此你 可能會失去這個新的動作。
　　使用deferreds我們可以做的更好 （為簡化起見菩咨，下面的代碼將只適用于一個單一的元素和一個單一的事件類型，但它可以很容易地擴展為多個事件類型的集合）：
$.fn.bindOnce = function( event, callback ) {
var element = $( this[ 0 ] ),
defer = element.data( "bind_once_defer_" + event );
if ( !defer ) {
defer = $.Deferred();
function deferCallback() {
element.unbind( event, deferCallback );
defer.resolveWith( this, arguments );
}
element.bind( event, deferCallback )
element.data( "bind_once_defer_" + event , defer );
}
return defer.done( callback ).promise();
};

該代碼的工作原理如下：
檢查該元素是否已經綁定了一個給定事件的deferred對象
如果沒有陡厘，創(chuàng)建它抽米，使它在觸發(fā)該事件的第一時間解決
然后在deferred上綁定給定的回調并返回promise

代碼雖然很冗長，但它會簡化相關問題的處理糙置。 讓我們先定義一個輔助方法：
$.fn.firstClick = function( callback ) {
return this.bindOnce( "click", callback );
};

然后云茸，之前的邏輯可以重構如下：
var openPanel = $( "#myButton" ).firstClick();
openPanel.done( initializeData );
openPanel.done( showPanel );

如果我們需要執(zhí)行一些動作，只有當面板打開以后谤饭，所有我們需要的是這樣的：
openPanel.done(function() { /* perform specific action */ });

如果面板沒有打開标捺，行動將得到延遲到單擊該按鈕時。
組合助手
　　單獨看以上每個例子揉抵，promise的作用是有限的 亡容。 然而，promise真正的力量是把它們混合在一起冤今。

在第一次點擊時加載面板內容并打開面板
　　假如闺兢，我們有一個按鈕，可以打開一個面板戏罢，請求其內容然后淡入內容屋谭。使用我們前面定義的助手方法，我們可以這樣做：
var panel = $( "#myPanel" );
panel.firstClick(function() {
$.when(
$.get( "panel.html" ),
panel.slideDownPromise()
).done(function( ajaxResponse ) {
panel.html( ajaxResponse[ 0 ] ).fadeIn();
});
});

在第一次點擊時載入圖像并打開面板
　　假如龟糕，我們已經的面板有內容桐磁，但我們只希望當第一次單擊按鈕時加載圖像并且當所有圖像加載成功后淡入圖像。HTML代碼如下：
<div id="myPanel">
<img data-src="image1.png" />
<img data-src="image2.png" />
<img data-src="image3.png" />
<img data-src="image4.png" />
</div>

我們使用data-src屬性描述圖片的真實路徑讲岁。 那么使用promise助手來解決該用例的代碼如下：
$( "#myButton" ).firstClick(function() {
var panel = $( "#myPanel" ),
promises = [];
$( "img", panel ).each(function() {
var image = $( this ), src = element.attr( "data-src" );
if ( src ) {
promises.push(
$.loadImage( src ).then( function() {
image.attr( "src", src );
}, function() {
image.attr( "src", "error.png" );
} )
);
}
});

promises.push( panel.slideDownPromise() );   

$.when.apply( null, promises ).done(function() { panel.fadeIn(); });   

});

這里的竅門是跟蹤所有的LoadImage 的promise我擂，接下來加入面板slideDown動畫。 因此首次點擊按鈕時催首，面板將slideDown并且圖像將開始加載扶踊。 一旦完成向下滑動面板和已加載的所有圖像，面板才會淡入郎任。
在特定延時后加載頁面上的圖像
　　假如秧耗，我們要在整個頁面實現(xiàn)遞延圖像顯示。 要做到這一點舶治，我們需要的HTML的格式如下：
<img data-src="image1.png" data-after="1000" src="placeholder.png" />
<img data-src="image2.png" data-after="1000" src="placeholder.png" />
<img data-src="image1.png" src="placeholder.png" />
<img data-src="image2.png" data-after="2000" src="placeholder.png" />

意思非常簡單：
image1.png分井，第三個圖像立即顯示车猬，一秒后第一個圖像顯示
image2.png 一秒鐘后顯示第二個圖像，兩秒鐘后顯示第四個圖像

我們將如何實現(xiàn)呢尺锚？
$( "img" ).each(function() {
var element = $( this ),
src = element.attr( "data-src" ),
after = element.attr( "data-after" );
if ( src ) {
$.when(
$.loadImage( src ),
$.afterDOMReady( after )
).then(function() {
element.attr( "src", src );
}, function() {
element.attr( "src", "error.png" );
} ).done(function() {
element.fadeIn();
});
}
});

如果我們想延遲加載的圖像本身珠闰，代碼會有所不同：
$( "img" ).each(function() {
var element = $( this ),
src = element.attr( "data-src" ),
after = element.attr( "data-after" );
if ( src ) {
$.afterDOMReady( after, function() {
$.loadImage( src ).then(function() {
element.attr( "src", src );
}, function() {
element.attr( "src", "error.png" );
} ).done(function() {
element.fadeIn();
});
} );
}
});

這里，我們首先在嘗試加載圖片之前等待延遲條件滿足瘫辩。當你想在頁面加載時限制網絡請求的數量會非常有意義伏嗜。
結論
　　正如你看到的，即使在沒有Ajax請求的情況下伐厌，promise也非常有用的承绸。通過使用jQuery 1.5中的deferred實現(xiàn) ，會非常容易的從你的代碼中分離出異步任務挣轨。 這樣的話军熏，你可以很容易的從你的應用程序中分離邏輯。