jQuery Deferred和Promise創(chuàng)建響應(yīng)式應(yīng)用程序詳細(xì)介紹
更新時(shí)間：2013年03月05日 14:40:47 作者：
接下來我們一起探索一下JavaScript中的 Deferred 和 Promise 的概念Deferred 提供了一個(gè)抽象的非阻塞的解決方案（如Ajax 請(qǐng)求的響應(yīng)），它創(chuàng)建一個(gè)promise對(duì)象，其目的是在未來某個(gè)時(shí)間點(diǎn)返回一個(gè)響應(yīng)，感興趣的可以參考下
這篇文章，我們一起探索一下 JavaScript 中的 Deferred 和 Promise 的概念，它們是 JavaScript 工具包（如Dojo和MochiKit）中非常重要的一個(gè)功能，最近也首次亮相于 流行的 JavaScript 庫(kù) jQuery（已經(jīng)是1.5版本的事情了）。 Deferred 提供了一個(gè)抽象的非阻塞的解決方案（如 Ajax 請(qǐng)求的響應(yīng)），它創(chuàng)建一個(gè) “promise” 對(duì)象，其目的是在未來某個(gè)時(shí)間點(diǎn)返回一個(gè)響應(yīng)。如果您之前沒有接觸過 “promise”，我們將會(huì)在下面做詳細(xì)介紹。
抽象來說，deferreds 可以理解為表示需要長(zhǎng)時(shí)間才能完成的耗時(shí)操作的一種方式，相比于阻塞式函數(shù)它們是異步的，而不是阻塞應(yīng)用程序等待其完成然后返回結(jié)果。deferred對(duì) 象會(huì)立即返回，然后你可以把回調(diào)函數(shù)綁定到deferred對(duì)象上，它們會(huì)在異步處理完成后被調(diào)用。
Promise
你可能已經(jīng)閱讀過一些關(guān)于promise和deferreds實(shí)現(xiàn)細(xì)節(jié)的資料。在本章節(jié)中，我們大致介紹下promise如何工作，這些在幾乎所有的支持deferreds的javascript框架中都是適用的。
一般情況下，promise作為一個(gè)模型，提供了一個(gè)在軟件工程中描述延時(shí)（或?qū)恚└拍畹慕鉀Q方案。它背后的思想我們已經(jīng)介紹過：不是執(zhí)行一個(gè)方法然后阻塞應(yīng)用程序等待結(jié)果返回，而是返回一個(gè)promise對(duì)象來滿足未來值。
舉一個(gè)例子會(huì)有助于理解，假設(shè)你正在建設(shè)一個(gè)web應(yīng)用程序， 它很大程度上依賴第三方api的數(shù)據(jù)。那么就會(huì)面臨一個(gè)共同的問題：我們無法獲悉一個(gè)API響應(yīng)的延遲時(shí)間，應(yīng)用程序的其他部分可能會(huì)被阻塞，直到它返回 結(jié)果。Deferreds 對(duì)這個(gè)問題提供了一個(gè)更好的解決方案，它是非阻塞的，并且與代碼完全解耦 。
Promise/A提議'定義了一個(gè)'then‘方法來注冊(cè)回調(diào)，當(dāng)處理函數(shù)返回結(jié)果時(shí)回調(diào)會(huì)執(zhí)行。它返回一個(gè)promise的偽代碼看起來是這樣的：
promise = callToAPI( arg1, arg2, ...);
promise.then(function( futureValue ) {
/* handle futureValue */
});
promise.then(function( futureValue ) {
/* do something else */
});
此外，promise回調(diào)會(huì)在處于以下兩種不同的狀態(tài)下執(zhí)行：
•resolved：在這種情況下，數(shù)據(jù)是可用
•rejected：在這種情況下，出現(xiàn)了錯(cuò)誤，沒有可用的值
幸運(yùn)的是，'then'方法接受兩個(gè)參數(shù)：一個(gè)用于promise得到了解決（resolved），另一個(gè)用于promise拒絕（rejected）。讓我們回到偽代碼：
promise.then( function( futureValue ) {
/* we got a value */
} , function() {
/* something went wrong */
} );
在某些情況下，我們需要獲得多個(gè)返回結(jié)果后，再繼續(xù)執(zhí)行應(yīng)用程序（例如，在用戶可以選擇他們感興趣的選項(xiàng)前，顯示一組動(dòng)態(tài)的選項(xiàng)）。這種情況下，'when'方法可以用來解決所有的promise都滿足后才能繼續(xù)執(zhí)行的場(chǎng)景。
when(
promise1,
promise2,
...
).then(function( futureValue1, futureValue2, ... ) {
/* all promises have completed and are resolved */
});
一個(gè)很好的例子是這樣一個(gè)場(chǎng)景，你可能同時(shí)有多個(gè)正在運(yùn)行的動(dòng)畫。 如果不跟蹤每個(gè)動(dòng)畫執(zhí)行完成后的回調(diào)，很難做到在動(dòng)畫完成后執(zhí)行下一步任務(wù)。然而使用promise和‘when'方式卻可以很直截了當(dāng)?shù)谋硎荆?一旦動(dòng)畫執(zhí)行完成，就可以執(zhí)行下一步任務(wù)。最終的結(jié)果是我們可以可以簡(jiǎn)單的用一個(gè)回調(diào)來解決多個(gè)動(dòng)畫執(zhí)行結(jié)果的等待問題。 例如：
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í)行。 而不是直接將回調(diào)傳遞給函數(shù)，這可能會(huì)導(dǎo)致緊耦合的接口，通過promise模式可以很容易區(qū)分同步和異步的概念。
在下一節(jié)中，我們將著眼于jQuery實(shí)現(xiàn)的deferreds，你可能會(huì)發(fā)現(xiàn)它明顯比現(xiàn)在所看到的promise模式要簡(jiǎn)單。
jQuery的Deferreds
jQuery在1.5版本中首次引入了deferreds。它 所實(shí)現(xiàn)的方法與我們之前描述的抽象的概念沒有大的差別。原則上，你獲得了在未來某個(gè)時(shí)候得到‘延時(shí)'返回值的能力。在此之前是無法單獨(dú)使用的。 Deferreds 作為對(duì)ajax模塊較大重寫的一部分添加進(jìn)來，它遵循了CommonJS的promise/ A設(shè)計(jì)。1.5和先前的版本包含deferred功能，可以使$.ajax() 接收調(diào)用完成及請(qǐng)求出錯(cuò)的回調(diào)，但卻存在嚴(yán)重的耦合。開發(fā)人員通常會(huì)使用其他庫(kù)或工具包來處理延遲任務(wù)。新版本的jQuery提供了一些增強(qiáng)的方式來管理 回調(diào)，提供更加靈活的方式建立回調(diào)，而不用關(guān)心原始的回調(diào)是否已經(jīng)觸發(fā)。 同時(shí)值得注意的是，jQuery的遞延對(duì)象支持多個(gè)回調(diào)綁定多個(gè)任務(wù)，任務(wù)本身可以既可以是同步也可以是異步的。
您可以瀏覽下表中的遞延功能，有助于了解哪些功能是你需要的：
jQuery延時(shí)實(shí)現(xiàn)的核心是jQuery.Deferred：一個(gè)可以鏈?zhǔn)秸{(diào)用的構(gòu)造函數(shù)。...... 需要注意的是任何deferred對(duì)象的默認(rèn)狀態(tài)是unresolved， 回調(diào)會(huì)通過 .then() 或 .fail()方法添加到隊(duì)列，并在稍后的過程中被執(zhí)行。
下面這個(gè)$.when() 接受多個(gè)參數(shù)的例子
function successFunc(){ console.log( “success!” ); }
function failureFunc(){ console.log( “failure!” ); }
$.when(
$.ajax( "/main.php" ),
$.ajax( "/modules.php" ),
$.ajax( “/lists.php” )
).then( successFunc, failureFunc );
在$.when() 的實(shí)現(xiàn)中有趣的是，它并非僅能解析deferred對(duì)象，還可以傳遞不是deferred對(duì)象的參數(shù)，在處理的時(shí)候會(huì)把它們當(dāng)做deferred對(duì)象并立 即執(zhí)行回調(diào)（doneCallbacks）。 這也是jQuery的Deferred實(shí)現(xiàn)中值得一提的地方，此外，deferred.then（）還為deferred.done和 deferred.fail（）方法在deferred的隊(duì)列中增加回調(diào)提供支持。
利用前面介紹的表中提到的deferred功能，我們來看一個(gè)代碼示例。 在這里，我們創(chuàng)建一個(gè)非?；镜膽?yīng)用程序：通過$.get方法（返回一個(gè)promise）獲取一條外部新聞源（1）并且（2）獲取最新的一條回復(fù)。 同時(shí)程序還通過函數(shù)（prepareInterface（））實(shí)現(xiàn)新聞和回復(fù)內(nèi)容顯示容器的動(dòng)畫。
為了確保在執(zhí)行其他相關(guān)行為前，上面的這三個(gè)步驟確保完成，我們使用$.when()。根據(jù)您的需要 .then()和.fail() 處理函數(shù)可以被用來執(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將有助于抽象掉異步的行為，并解耦我們的代碼。
異步緩存
當(dāng)涉及到異步任務(wù)，緩存可以是一個(gè)有點(diǎn)苛刻的，因?yàn)槟惚仨毚_保對(duì)于同一個(gè)key任務(wù)僅執(zhí)行一次。因此，代碼需要以某種方式跟蹤入站任務(wù)。 例如下面的代碼片段：
$.cachedGetScript( url, callback1 );
$.cachedGetScript( url, callback2 );
緩存機(jī)制需要確保 腳本不管是否已經(jīng)存在于緩存，只能被請(qǐng)求一次。 因此，為了緩存系統(tǒng)可以正確地處理請(qǐng)求,我們最終需要寫出一些邏輯來跟蹤綁定到給定url上的回調(diào)。
值得慶幸的是，這恰好是deferred所實(shí)現(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 );
};
代碼相當(dāng)簡(jiǎn)單：我們?yōu)槊恳粋€(gè)url緩存一個(gè)promise對(duì)象。 如果給定的url沒有promise，我們創(chuàng)建一個(gè)deferred，并發(fā)出請(qǐng)求。 如果它已經(jīng)存在我們只需要為它綁定回調(diào)。 該解決方案的一大優(yōu)勢(shì)是，它會(huì)透明地處理新的和緩存過的請(qǐng)求。 另一個(gè)優(yōu)點(diǎn)是一個(gè)基于deferred的緩存 會(huì)優(yōu)雅地處理失敗情況。 當(dāng)promise以‘rejected'狀態(tài)結(jié)束的話，我們可以提供一個(gè)錯(cuò)誤回調(diào)來測(cè)試：
$.cachedGetScript( url ).then( successCallback, errorCallback );
請(qǐng)記?。簾o論請(qǐng)求是否緩存過，上面的代碼段都會(huì)正常運(yùn)作！
通用異步緩存
為了使代碼盡可能的通用，我們建立一個(gè)緩存工廠并抽象出實(shí)際需要執(zhí)行的任務(wù)：
$.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)在具體的請(qǐng)求邏輯已經(jīng)抽象出來，我們可以重新寫cachedGetScript：
$.cachedGetScript = $.createCache(function( defer, url ) {
$.getScript( url ).then( defer.resolve, defer.reject );
});
每次調(diào)用createCache將創(chuàng)建一個(gè)新的緩存庫(kù)，并返回一個(gè)新的高速緩存檢索函數(shù)?，F(xiàn)在，我們擁有了一個(gè)通用的緩存工廠，它很容易實(shí)現(xiàn)涉及從緩存中取值的邏輯場(chǎng)景。
圖片加載
另一個(gè)候選場(chǎng)景是圖像加載：確保我們不加載同一個(gè)圖像兩次，我們可能需要加載圖像。 使用createCache很容易實(shí)現(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是否已經(jīng)被加載，或者正在加載過程中，緩存都會(huì)正常工作。
緩存數(shù)據(jù)的API響應(yīng)
哪些你的頁(yè)面的生命周期過程中被認(rèn)為是不可變的API請(qǐng)求，也是緩存完美的候選場(chǎng)景。 比如，執(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上進(jìn)行搜索，同時(shí)緩存它們：
$.searchTwitter( "jQuery Deferred", callback1 );
$.searchTwitter( "jQuery Deferred", callback2 );
定時(shí)
基于deferred的緩存并不限定于網(wǎng)絡(luò)請(qǐng)求;它也可以被用于定時(shí)目的。
例如，您可能需要在網(wǎng)頁(yè)上給定一段時(shí)間后執(zhí)行一個(gè)動(dòng)作，來吸引用戶對(duì)某個(gè)不容易引起注意的特定功能的關(guān)注或處理一個(gè)延時(shí)問題。 雖然setTimeout適合大多數(shù)用例，但在計(jì)時(shí)器出發(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輔助方法用最少的計(jì)數(shù)器提供了domReady后的適當(dāng)時(shí)機(jī)。 如果延遲已經(jīng)過期，回調(diào)會(huì)被馬上執(zhí)行。
同步多個(gè)動(dòng)畫
動(dòng)畫是另一個(gè)常見的異步任務(wù)范例。 然而在幾個(gè)不相關(guān)的動(dòng)畫完成后執(zhí)行代碼仍然有點(diǎn)挑戰(zhàn)性。盡管在jQuery1.6中才提供了在動(dòng)畫元素上取得promise對(duì)象的功能，但它是很容易的手動(dòng)實(shí)現(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()同步化不同的動(dòng)畫：
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();
};
});
然后想下面這樣使用新的助手代碼來同步動(dòng)畫：
$.when(
$( "#div1" ).fadeOutPromise(),
$( "#div2" ).fadeInPromise( "fast" )
).done(function() {
/* both animations are done */
});
一次性事件
雖然jQuery提供你可能需要的所有的時(shí)間綁定方法，但當(dāng)事件僅需要處理一次時(shí)，情況可能會(huì)變得有點(diǎn)棘手。（ 與$.one() 不同 )
例如，您可能希望有一個(gè)按鈕，當(dāng)它第一次被點(diǎn)擊時(shí)打開一個(gè)面板，面板打開之后，執(zhí)行特定的初始化邏輯。 在處理這種情況時(shí)，人們通常會(huì)這樣寫代碼：
var buttonClicked = false;
$( "#myButton" ).click(function() {
if ( !buttonClicked ) {
buttonClicked = true;
initializeData();
showPanel();
}
});
不久后，你可能會(huì)在面板打開之后點(diǎn)擊按鈕時(shí)添加一些操作，如下：
if ( buttonClicked ) { /* perform specific action */ }
這是一個(gè)非常耦合的解決辦法。 如果你想添加一些其他的操作，你必須編輯綁定代碼或拷貝一份。 如果你不這樣做，你唯一的選擇是測(cè)試buttonClicked。由于buttonClicked可能是false，新的代碼可能永遠(yuǎn)不會(huì)被執(zhí)行，因此你 可能會(huì)失去這個(gè)新的動(dòng)作。
使用deferreds我們可以做的更好 （為簡(jiǎn)化起見，下面的代碼將只適用于一個(gè)單一的元素和一個(gè)單一的事件類型，但它可以很容易地?cái)U(kuò)展為多個(gè)事件類型的集合）：
$.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();
};
該代碼的工作原理如下：
•檢查該元素是否已經(jīng)綁定了一個(gè)給定事件的deferred對(duì)象
•如果沒有，創(chuàng)建它，使它在觸發(fā)該事件的第一時(shí)間解決
•然后在deferred上綁定給定的回調(diào)并返回promise
代碼雖然很冗長(zhǎng)，但它會(huì)簡(jiǎn)化相關(guān)問題的處理。 讓我們先定義一個(gè)輔助方法：
$.fn.firstClick = function( callback ) {
return this.bindOnce( "click", callback );
};
然后，之前的邏輯可以重構(gòu)如下：
var openPanel = $( "#myButton" ).firstClick();
openPanel.done( initializeData );
openPanel.done( showPanel );
如果我們需要執(zhí)行一些動(dòng)作，只有當(dāng)面板打開以后，所有我們需要的是這樣的：
openPanel.done(function() { /* perform specific action */ });
如果面板沒有打開，行動(dòng)將得到延遲到單擊該按鈕時(shí)。
組合助手
單獨(dú)看以上每個(gè)例子，promise的作用是有限的 。 然而，promise真正的力量是把它們混合在一起。
在第一次點(diǎn)擊時(shí)加載面板內(nèi)容并打開面板
假如，我們有一個(gè)按鈕，可以打開一個(gè)面板，請(qǐng)求其內(nèi)容然后淡入內(nèi)容。使用我們前面定義的助手方法，我們可以這樣做：
var panel = $( "#myPanel" );
panel.firstClick(function() {
$.when(
$.get( "panel.html" ),
panel.slideDownPromise()
).done(function( ajaxResponse ) {
panel.html( ajaxResponse[ 0 ] ).fadeIn();
});
});
在第一次點(diǎn)擊時(shí)載入圖像并打開面板
假如，我們已經(jīng)的面板有內(nèi)容，但我們只希望當(dāng)?shù)谝淮螁螕舭粹o時(shí)加載圖像并且當(dāng)所有圖像加載成功后淡入圖像。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屬性描述圖片的真實(shí)路徑。 那么使用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動(dòng)畫。 因此首次點(diǎn)擊按鈕時(shí)，面板將slideDown并且圖像將開始加載。 一旦完成向下滑動(dòng)面板和已加載的所有圖像，面板才會(huì)淡入。
在特定延時(shí)后加載頁(yè)面上的圖像
假如，我們要在整個(gè)頁(yè)面實(shí)現(xiàn)遞延圖像顯示。 要做到這一點(diǎ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" />
意思非常簡(jiǎn)單：
•image1.png，第三個(gè)圖像立即顯示，一秒后第一個(gè)圖像顯示
•image2.png 一秒鐘后顯示第二個(gè)圖像，兩秒鐘后顯示第四個(gè)圖像
我們將如何實(shí)現(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();
});
}
});
如果我們想延遲加載的圖像本身，代碼會(huì)有所不同：
$( "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();
});
} );
}
});
這里，我們首先在嘗試加載圖片之前等待延遲條件滿足。當(dāng)你想在頁(yè)面加載時(shí)限制網(wǎng)絡(luò)請(qǐng)求的數(shù)量會(huì)非常有意義。
結(jié)論
正如你看到的，即使在沒有Ajax請(qǐng)求的情況下，promise也非常有用的。通過使用jQuery 1.5中的deferred實(shí)現(xiàn) ，會(huì)非常容易的從你的代碼中分離出異步任務(wù)。 這樣的話，你可以很容易的從你的應(yīng)用程序中分離邏輯。
抽象來說，deferreds 可以理解為表示需要長(zhǎng)時(shí)間才能完成的耗時(shí)操作的一種方式，相比于阻塞式函數(shù)它們是異步的，而不是阻塞應(yīng)用程序等待其完成然后返回結(jié)果。deferred對(duì) 象會(huì)立即返回，然后你可以把回調(diào)函數(shù)綁定到deferred對(duì)象上，它們會(huì)在異步處理完成后被調(diào)用。
Promise
你可能已經(jīng)閱讀過一些關(guān)于promise和deferreds實(shí)現(xiàn)細(xì)節(jié)的資料。在本章節(jié)中，我們大致介紹下promise如何工作，這些在幾乎所有的支持deferreds的javascript框架中都是適用的。
一般情況下，promise作為一個(gè)模型，提供了一個(gè)在軟件工程中描述延時(shí)（或?qū)恚└拍畹慕鉀Q方案。它背后的思想我們已經(jīng)介紹過：不是執(zhí)行一個(gè)方法然后阻塞應(yīng)用程序等待結(jié)果返回，而是返回一個(gè)promise對(duì)象來滿足未來值。
舉一個(gè)例子會(huì)有助于理解，假設(shè)你正在建設(shè)一個(gè)web應(yīng)用程序， 它很大程度上依賴第三方api的數(shù)據(jù)。那么就會(huì)面臨一個(gè)共同的問題：我們無法獲悉一個(gè)API響應(yīng)的延遲時(shí)間，應(yīng)用程序的其他部分可能會(huì)被阻塞，直到它返回 結(jié)果。Deferreds 對(duì)這個(gè)問題提供了一個(gè)更好的解決方案，它是非阻塞的，并且與代碼完全解耦 。
Promise/A提議'定義了一個(gè)'then‘方法來注冊(cè)回調(diào)，當(dāng)處理函數(shù)返回結(jié)果時(shí)回調(diào)會(huì)執(zhí)行。它返回一個(gè)promise的偽代碼看起來是這樣的：
復(fù)制代碼 代碼如下:
promise = callToAPI( arg1, arg2, ...);
promise.then(function( futureValue ) {
/* handle futureValue */
});
promise.then(function( futureValue ) {
/* do something else */
});
此外，promise回調(diào)會(huì)在處于以下兩種不同的狀態(tài)下執(zhí)行：
•resolved：在這種情況下，數(shù)據(jù)是可用
•rejected：在這種情況下，出現(xiàn)了錯(cuò)誤，沒有可用的值
幸運(yùn)的是，'then'方法接受兩個(gè)參數(shù)：一個(gè)用于promise得到了解決（resolved），另一個(gè)用于promise拒絕（rejected）。讓我們回到偽代碼：
復(fù)制代碼 代碼如下:
promise.then( function( futureValue ) {
/* we got a value */
} , function() {
/* something went wrong */
} );
在某些情況下，我們需要獲得多個(gè)返回結(jié)果后，再繼續(xù)執(zhí)行應(yīng)用程序（例如，在用戶可以選擇他們感興趣的選項(xiàng)前，顯示一組動(dòng)態(tài)的選項(xiàng)）。這種情況下，'when'方法可以用來解決所有的promise都滿足后才能繼續(xù)執(zhí)行的場(chǎng)景。
復(fù)制代碼 代碼如下:
when(
promise1,
promise2,
...
).then(function( futureValue1, futureValue2, ... ) {
/* all promises have completed and are resolved */
});
一個(gè)很好的例子是這樣一個(gè)場(chǎng)景，你可能同時(shí)有多個(gè)正在運(yùn)行的動(dòng)畫。 如果不跟蹤每個(gè)動(dòng)畫執(zhí)行完成后的回調(diào)，很難做到在動(dòng)畫完成后執(zhí)行下一步任務(wù)。然而使用promise和‘when'方式卻可以很直截了當(dāng)?shù)谋硎荆?一旦動(dòng)畫執(zhí)行完成，就可以執(zhí)行下一步任務(wù)。最終的結(jié)果是我們可以可以簡(jiǎn)單的用一個(gè)回調(diào)來解決多個(gè)動(dòng)畫執(zhí)行結(jié)果的等待問題。 例如：
復(fù)制代碼 代碼如下:
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í)行。 而不是直接將回調(diào)傳遞給函數(shù)，這可能會(huì)導(dǎo)致緊耦合的接口，通過promise模式可以很容易區(qū)分同步和異步的概念。
在下一節(jié)中，我們將著眼于jQuery實(shí)現(xiàn)的deferreds，你可能會(huì)發(fā)現(xiàn)它明顯比現(xiàn)在所看到的promise模式要簡(jiǎn)單。
jQuery的Deferreds
jQuery在1.5版本中首次引入了deferreds。它 所實(shí)現(xiàn)的方法與我們之前描述的抽象的概念沒有大的差別。原則上，你獲得了在未來某個(gè)時(shí)候得到‘延時(shí)'返回值的能力。在此之前是無法單獨(dú)使用的。 Deferreds 作為對(duì)ajax模塊較大重寫的一部分添加進(jìn)來，它遵循了CommonJS的promise/ A設(shè)計(jì)。1.5和先前的版本包含deferred功能，可以使$.ajax() 接收調(diào)用完成及請(qǐng)求出錯(cuò)的回調(diào)，但卻存在嚴(yán)重的耦合。開發(fā)人員通常會(huì)使用其他庫(kù)或工具包來處理延遲任務(wù)。新版本的jQuery提供了一些增強(qiáng)的方式來管理 回調(diào)，提供更加靈活的方式建立回調(diào)，而不用關(guān)心原始的回調(diào)是否已經(jīng)觸發(fā)。 同時(shí)值得注意的是，jQuery的遞延對(duì)象支持多個(gè)回調(diào)綁定多個(gè)任務(wù)，任務(wù)本身可以既可以是同步也可以是異步的。
您可以瀏覽下表中的遞延功能，有助于了解哪些功能是你需要的：
| jQuery.Deferred（） | 創(chuàng)建一個(gè)新的Deferred對(duì)象的構(gòu)造函數(shù)，可以帶一個(gè)可選的函數(shù)參數(shù)，它會(huì)在構(gòu)造完成后被調(diào)用。 |
| jQuery.when（） | 通過該方式來執(zhí)行基于一個(gè)或多個(gè)表示異步任務(wù)的對(duì)象上的回調(diào)函數(shù) |
| jQuery.ajax（） | 執(zhí)行異步Ajax請(qǐng)求，返回實(shí)現(xiàn)了promise接口的jqXHR對(duì)象 |
| deferred.then（resolveCallback，rejectCallback） | 添加處理程序被調(diào)用時(shí)，遞延對(duì)象得到解決或者拒絕的回調(diào)。 |
| deferred.done（） |
當(dāng)延遲成功時(shí)調(diào)用一個(gè)函數(shù)或者數(shù)組函數(shù). |
| deferred.fail（） |
當(dāng)延遲失敗時(shí)調(diào)用一個(gè)函數(shù)或者數(shù)組函數(shù).。 |
| deferred.resolve（ARG1，ARG2，...） | 調(diào)用Deferred對(duì)象注冊(cè)的‘done'回調(diào)函數(shù)并傳遞參數(shù) |
| deferred.resolveWith（context，args） | 調(diào)用Deferred對(duì)象注冊(cè)的‘done'回調(diào)函數(shù)并傳遞參數(shù)和設(shè)置回調(diào)上下文 |
| deferred.isResolved | 確定一個(gè)Deferred對(duì)象是否已經(jīng)解決。 |
| deferred.reject（arg1，arg2，...） | 調(diào)用Deferred對(duì)象注冊(cè)的‘fail'回調(diào)函數(shù)并傳遞參數(shù) |
| deferred.rejectWith（context，args） | 調(diào)用Deferred對(duì)象注冊(cè)的‘fail'回調(diào)函數(shù)并傳遞參數(shù)和設(shè)置回調(diào)上下文 |
| deferred.promise（） | 返回promise對(duì)象，這是一個(gè)偽造的deferred對(duì)象：它基于deferred并且不能改變狀態(tài)所以可以被安全的傳遞 |
jQuery延時(shí)實(shí)現(xiàn)的核心是jQuery.Deferred：一個(gè)可以鏈?zhǔn)秸{(diào)用的構(gòu)造函數(shù)。...... 需要注意的是任何deferred對(duì)象的默認(rèn)狀態(tài)是unresolved， 回調(diào)會(huì)通過 .then() 或 .fail()方法添加到隊(duì)列，并在稍后的過程中被執(zhí)行。
下面這個(gè)$.when() 接受多個(gè)參數(shù)的例子
復(fù)制代碼 代碼如下:
function successFunc(){ console.log( “success!” ); }
function failureFunc(){ console.log( “failure!” ); }
$.when(
$.ajax( "/main.php" ),
$.ajax( "/modules.php" ),
$.ajax( “/lists.php” )
).then( successFunc, failureFunc );
在$.when() 的實(shí)現(xiàn)中有趣的是，它并非僅能解析deferred對(duì)象，還可以傳遞不是deferred對(duì)象的參數(shù)，在處理的時(shí)候會(huì)把它們當(dāng)做deferred對(duì)象并立 即執(zhí)行回調(diào)（doneCallbacks）。 這也是jQuery的Deferred實(shí)現(xiàn)中值得一提的地方，此外，deferred.then（）還為deferred.done和 deferred.fail（）方法在deferred的隊(duì)列中增加回調(diào)提供支持。
利用前面介紹的表中提到的deferred功能，我們來看一個(gè)代碼示例。 在這里，我們創(chuàng)建一個(gè)非?；镜膽?yīng)用程序：通過$.get方法（返回一個(gè)promise）獲取一條外部新聞源（1）并且（2）獲取最新的一條回復(fù)。 同時(shí)程序還通過函數(shù)（prepareInterface（））實(shí)現(xiàn)新聞和回復(fù)內(nèi)容顯示容器的動(dòng)畫。
為了確保在執(zhí)行其他相關(guān)行為前，上面的這三個(gè)步驟確保完成，我們使用$.when()。根據(jù)您的需要 .then()和.fail() 處理函數(shù)可以被用來執(zhí)行其他程序邏輯。
復(fù)制代碼 代碼如下:
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將有助于抽象掉異步的行為，并解耦我們的代碼。
異步緩存
當(dāng)涉及到異步任務(wù)，緩存可以是一個(gè)有點(diǎn)苛刻的，因?yàn)槟惚仨毚_保對(duì)于同一個(gè)key任務(wù)僅執(zhí)行一次。因此，代碼需要以某種方式跟蹤入站任務(wù)。 例如下面的代碼片段：
復(fù)制代碼 代碼如下:
$.cachedGetScript( url, callback1 );
$.cachedGetScript( url, callback2 );
緩存機(jī)制需要確保 腳本不管是否已經(jīng)存在于緩存，只能被請(qǐng)求一次。 因此，為了緩存系統(tǒng)可以正確地處理請(qǐng)求,我們最終需要寫出一些邏輯來跟蹤綁定到給定url上的回調(diào)。
值得慶幸的是，這恰好是deferred所實(shí)現(xiàn)的那種邏輯，因此我們可以這樣來做：
復(fù)制代碼 代碼如下:
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 );
};
代碼相當(dāng)簡(jiǎn)單：我們?yōu)槊恳粋€(gè)url緩存一個(gè)promise對(duì)象。 如果給定的url沒有promise，我們創(chuàng)建一個(gè)deferred，并發(fā)出請(qǐng)求。 如果它已經(jīng)存在我們只需要為它綁定回調(diào)。 該解決方案的一大優(yōu)勢(shì)是，它會(huì)透明地處理新的和緩存過的請(qǐng)求。 另一個(gè)優(yōu)點(diǎn)是一個(gè)基于deferred的緩存 會(huì)優(yōu)雅地處理失敗情況。 當(dāng)promise以‘rejected'狀態(tài)結(jié)束的話，我們可以提供一個(gè)錯(cuò)誤回調(diào)來測(cè)試：
$.cachedGetScript( url ).then( successCallback, errorCallback );
請(qǐng)記?。簾o論請(qǐng)求是否緩存過，上面的代碼段都會(huì)正常運(yùn)作！
通用異步緩存
為了使代碼盡可能的通用，我們建立一個(gè)緩存工廠并抽象出實(shí)際需要執(zhí)行的任務(wù)：
復(fù)制代碼 代碼如下:
$.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)在具體的請(qǐng)求邏輯已經(jīng)抽象出來，我們可以重新寫cachedGetScript：
復(fù)制代碼 代碼如下:
$.cachedGetScript = $.createCache(function( defer, url ) {
$.getScript( url ).then( defer.resolve, defer.reject );
});
每次調(diào)用createCache將創(chuàng)建一個(gè)新的緩存庫(kù)，并返回一個(gè)新的高速緩存檢索函數(shù)?，F(xiàn)在，我們擁有了一個(gè)通用的緩存工廠，它很容易實(shí)現(xiàn)涉及從緩存中取值的邏輯場(chǎng)景。
圖片加載
另一個(gè)候選場(chǎng)景是圖像加載：確保我們不加載同一個(gè)圖像兩次，我們可能需要加載圖像。 使用createCache很容易實(shí)現(xiàn)：
復(fù)制代碼 代碼如下:
$.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;
});
接下來的代碼片段如下：
復(fù)制代碼 代碼如下:
$.loadImage( "my-image.png" ).done( callback1 );
$.loadImage( "my-image.png" ).done( callback2 );
無論image.png是否已經(jīng)被加載，或者正在加載過程中，緩存都會(huì)正常工作。
緩存數(shù)據(jù)的API響應(yīng)
哪些你的頁(yè)面的生命周期過程中被認(rèn)為是不可變的API請(qǐng)求，也是緩存完美的候選場(chǎng)景。 比如，執(zhí)行以下操作：
復(fù)制代碼 代碼如下:
$.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上進(jìn)行搜索，同時(shí)緩存它們：
復(fù)制代碼 代碼如下:
$.searchTwitter( "jQuery Deferred", callback1 );
$.searchTwitter( "jQuery Deferred", callback2 );
定時(shí)
基于deferred的緩存并不限定于網(wǎng)絡(luò)請(qǐng)求;它也可以被用于定時(shí)目的。
例如，您可能需要在網(wǎng)頁(yè)上給定一段時(shí)間后執(zhí)行一個(gè)動(dòng)作，來吸引用戶對(duì)某個(gè)不容易引起注意的特定功能的關(guān)注或處理一個(gè)延時(shí)問題。 雖然setTimeout適合大多數(shù)用例，但在計(jì)時(shí)器出發(fā)后甚至理論上過期后就無法提供解決辦法。 我們可以使用以下的緩存系統(tǒng)來處理：
復(fù)制代碼 代碼如下:
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輔助方法用最少的計(jì)數(shù)器提供了domReady后的適當(dāng)時(shí)機(jī)。 如果延遲已經(jīng)過期，回調(diào)會(huì)被馬上執(zhí)行。
同步多個(gè)動(dòng)畫
動(dòng)畫是另一個(gè)常見的異步任務(wù)范例。 然而在幾個(gè)不相關(guān)的動(dòng)畫完成后執(zhí)行代碼仍然有點(diǎn)挑戰(zhàn)性。盡管在jQuery1.6中才提供了在動(dòng)畫元素上取得promise對(duì)象的功能，但它是很容易的手動(dòng)實(shí)現(xiàn)：
復(fù)制代碼 代碼如下:
$.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()同步化不同的動(dòng)畫：
復(fù)制代碼 代碼如下:
var fadeDiv1Out = $( "#div1" ).animatePromise({ opacity: 0 }),
fadeDiv2In = $( "#div1" ).animatePromise({ opacity: 1 }, "fast" );
$.when( fadeDiv1Out, fadeDiv2In ).done(function() {
/* both animations ended */
});
我們也可以使用同樣的技巧，建立了一些輔助方法：
復(fù)制代碼 代碼如下:
$.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();
};
});
然后想下面這樣使用新的助手代碼來同步動(dòng)畫：
復(fù)制代碼 代碼如下:
$.when(
$( "#div1" ).fadeOutPromise(),
$( "#div2" ).fadeInPromise( "fast" )
).done(function() {
/* both animations are done */
});
一次性事件
雖然jQuery提供你可能需要的所有的時(shí)間綁定方法，但當(dāng)事件僅需要處理一次時(shí)，情況可能會(huì)變得有點(diǎn)棘手。（ 與$.one() 不同 )
例如，您可能希望有一個(gè)按鈕，當(dāng)它第一次被點(diǎn)擊時(shí)打開一個(gè)面板，面板打開之后，執(zhí)行特定的初始化邏輯。 在處理這種情況時(shí)，人們通常會(huì)這樣寫代碼：
復(fù)制代碼 代碼如下:
var buttonClicked = false;
$( "#myButton" ).click(function() {
if ( !buttonClicked ) {
buttonClicked = true;
initializeData();
showPanel();
}
});
不久后，你可能會(huì)在面板打開之后點(diǎn)擊按鈕時(shí)添加一些操作，如下：
復(fù)制代碼 代碼如下:
if ( buttonClicked ) { /* perform specific action */ }
這是一個(gè)非常耦合的解決辦法。 如果你想添加一些其他的操作，你必須編輯綁定代碼或拷貝一份。 如果你不這樣做，你唯一的選擇是測(cè)試buttonClicked。由于buttonClicked可能是false，新的代碼可能永遠(yuǎn)不會(huì)被執(zhí)行，因此你 可能會(huì)失去這個(gè)新的動(dòng)作。
使用deferreds我們可以做的更好 （為簡(jiǎn)化起見，下面的代碼將只適用于一個(gè)單一的元素和一個(gè)單一的事件類型，但它可以很容易地?cái)U(kuò)展為多個(gè)事件類型的集合）：
復(fù)制代碼 代碼如下:
$.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();
};
該代碼的工作原理如下：
•檢查該元素是否已經(jīng)綁定了一個(gè)給定事件的deferred對(duì)象
•如果沒有，創(chuàng)建它，使它在觸發(fā)該事件的第一時(shí)間解決
•然后在deferred上綁定給定的回調(diào)并返回promise
代碼雖然很冗長(zhǎng)，但它會(huì)簡(jiǎn)化相關(guān)問題的處理。 讓我們先定義一個(gè)輔助方法：
復(fù)制代碼 代碼如下:
$.fn.firstClick = function( callback ) {
return this.bindOnce( "click", callback );
};
然后，之前的邏輯可以重構(gòu)如下：
復(fù)制代碼 代碼如下:
var openPanel = $( "#myButton" ).firstClick();
openPanel.done( initializeData );
openPanel.done( showPanel );
如果我們需要執(zhí)行一些動(dòng)作，只有當(dāng)面板打開以后，所有我們需要的是這樣的：
復(fù)制代碼 代碼如下:
openPanel.done(function() { /* perform specific action */ });
如果面板沒有打開，行動(dòng)將得到延遲到單擊該按鈕時(shí)。
組合助手
單獨(dú)看以上每個(gè)例子，promise的作用是有限的 。 然而，promise真正的力量是把它們混合在一起。
在第一次點(diǎn)擊時(shí)加載面板內(nèi)容并打開面板
假如，我們有一個(gè)按鈕，可以打開一個(gè)面板，請(qǐng)求其內(nèi)容然后淡入內(nèi)容。使用我們前面定義的助手方法，我們可以這樣做：
復(fù)制代碼 代碼如下:
var panel = $( "#myPanel" );
panel.firstClick(function() {
$.when(
$.get( "panel.html" ),
panel.slideDownPromise()
).done(function( ajaxResponse ) {
panel.html( ajaxResponse[ 0 ] ).fadeIn();
});
});
在第一次點(diǎn)擊時(shí)載入圖像并打開面板
假如，我們已經(jīng)的面板有內(nèi)容，但我們只希望當(dāng)?shù)谝淮螁螕舭粹o時(shí)加載圖像并且當(dāng)所有圖像加載成功后淡入圖像。HTML代碼如下：
復(fù)制代碼 代碼如下:
<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屬性描述圖片的真實(shí)路徑。 那么使用promise助手來解決該用例的代碼如下：
復(fù)制代碼 代碼如下:
$( "#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動(dòng)畫。 因此首次點(diǎn)擊按鈕時(shí)，面板將slideDown并且圖像將開始加載。 一旦完成向下滑動(dòng)面板和已加載的所有圖像，面板才會(huì)淡入。
在特定延時(shí)后加載頁(yè)面上的圖像
假如，我們要在整個(gè)頁(yè)面實(shí)現(xiàn)遞延圖像顯示。 要做到這一點(diǎn)，我們需要的HTML的格式如下：
復(fù)制代碼 代碼如下:
<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" />
意思非常簡(jiǎn)單：
•image1.png，第三個(gè)圖像立即顯示，一秒后第一個(gè)圖像顯示
•image2.png 一秒鐘后顯示第二個(gè)圖像，兩秒鐘后顯示第四個(gè)圖像
我們將如何實(shí)現(xiàn)呢？
復(fù)制代碼 代碼如下:
$( "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();
});
}
});
如果我們想延遲加載的圖像本身，代碼會(huì)有所不同：
復(fù)制代碼 代碼如下:
$( "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();
});
} );
}
});
這里，我們首先在嘗試加載圖片之前等待延遲條件滿足。當(dāng)你想在頁(yè)面加載時(shí)限制網(wǎng)絡(luò)請(qǐng)求的數(shù)量會(huì)非常有意義。
結(jié)論
正如你看到的，即使在沒有Ajax請(qǐng)求的情況下，promise也非常有用的。通過使用jQuery 1.5中的deferred實(shí)現(xiàn) ，會(huì)非常容易的從你的代碼中分離出異步任務(wù)。 這樣的話，你可以很容易的從你的應(yīng)用程序中分離邏輯。
您可能感興趣的文章:
- CSS3+Js實(shí)現(xiàn)響應(yīng)式導(dǎo)航條
- 原生JS實(shí)現(xiàn)響應(yīng)式瀑布流布局
- Bootstrap實(shí)現(xiàn)響應(yīng)式導(dǎo)航欄效果
- 使用Chart.js圖表庫(kù)制作漂亮的響應(yīng)式表單
- Bootstrap Metronic完全響應(yīng)式管理模板之菜單欄學(xué)習(xí)筆記
- jQuery插件slick實(shí)現(xiàn)響應(yīng)式移動(dòng)端幻燈片圖片切換特效
- jquery SweetAlert插件實(shí)現(xiàn)響應(yīng)式提示框
- CSS圖片響應(yīng)式 垂直水平居中
- 8款非常棒的響應(yīng)式j(luò)Query 幻燈片插件推薦
- 幾種響應(yīng)式文字詳解
相關(guān)文章
jQuery查找和過濾_動(dòng)力節(jié)點(diǎn)節(jié)點(diǎn)Java學(xué)院整理
這篇文章主要為大家詳細(xì)介紹了jQuery查找和過濾的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
3kb jQuery代碼搞定各種樹形選擇的實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄?kb jQuery代碼搞定各種樹形選擇的實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-06-06
這篇文章主要介紹了jQuery增加與刪除table列的方法,涉及jQuery針對(duì)table表格元素動(dòng)態(tài)操作相關(guān)技巧,需要的朋友可以參考下2016-03-03
基于jquery的時(shí)間段實(shí)現(xiàn)代碼
基于jquery的時(shí)間段實(shí)現(xiàn)代碼，需要的朋友可以參考下2012-08-08
jQuery模板技術(shù)和數(shù)據(jù)綁定實(shí)現(xiàn)代碼
如果你用過ASP.NET的數(shù)據(jù)綁定控件，也用過ASP或者JSP里那種通過輸出HTML元素在頁(yè)面上顯示數(shù)據(jù)的方法，你就知道ASP.NET數(shù)據(jù)綁定控件有多么方便。如果能夠?qū)⑼瑯拥墓δ茉跒g覽器端用HTML和JavaScript實(shí)現(xiàn)，那該是多少美妙的事情。2010-05-05
最近一年多一直在做前端的東西，由于老板在追求一些年輕動(dòng)感的效果，讓頁(yè)面元素不能僅僅是簡(jiǎn)單的隱藏顯示，所以經(jīng)常會(huì)使用一些動(dòng)畫效果，發(fā)現(xiàn)jQuery的動(dòng)畫真心好用啊，把常用的幾個(gè)總結(jié)一下，希望不再每次使用的時(shí)候還去翻API2013-10-10
看了前面兩講的54淘客網(wǎng)友，我想應(yīng)該對(duì)JQuery已經(jīng)有了個(gè)初步的認(rèn)識(shí)，知道如何用JQuery選擇器來獲取控件的值，今天我們主要講使用JQuery對(duì)常用控件的取值。2010-07-07
這篇文章主要為大家詳細(xì)介紹了jquery標(biāo)簽選擇器應(yīng)用示例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
jquery.jsPlumb實(shí)現(xiàn)拓?fù)鋱D
這篇文章主要為大家詳細(xì)介紹了jquery.jsPlumb實(shí)現(xiàn)拓?fù)鋱D，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
騰訊與新浪的通過IP地址獲取當(dāng)前地理位置（省份）的接口
通過IP地址獲取當(dāng)前地理位置（省份）的接口，方便大家可以直接使用結(jié)合自己的系統(tǒng)。2010-07-07