jQuery中的Deferred-詳解和使用

風靈使發表於2018-09-11
jQuery

首先，為什麼要使用Deferred？

先來看一段AJAX的程式碼：

var data;
$.get('api/data', function(resp) {
    data = resp.data;
});
doSomethingFancyWithData(data);

這段程式碼極容易出問題，請求時間多長或者超時，將會導致我們獲取不到data。只有把請求設定為同步我們才能夠等待獲取到data，才執行我們的函式。但是這會帶來阻塞，導致使用者介面一直被凍結，對使用者體驗有很嚴重的影響。所以我們需要使用非同步程式設計，

JS的非同步程式設計有兩種方式基於事件和基於回撥，

傳統的非同步程式設計會帶來的一些問題，

1.序列化非同步操作導致的問題：

1），延續傳遞風格Continuation Passing Style (CPS)
2），深度巢狀
3），回撥地獄

2.並行非同步操作的困難

下面是一段序列化非同步操作的程式碼：

 // Demonstrates nesting, CPS, 'callback hell'
 $.get('api1/data', function(resp1) {
     // Next that depended on the first response.
     $.get('api2/data', function(resp2) {
         // Next request that depended on the second response.
         $.get('api3/data', function(resp3) {
             // Next request that depended on the third response.
             $.get(); // ... you get the idea.
         });
     });
 });

當回撥越來越多，巢狀越深，程式碼可讀性就會越來越差。如果註冊了多個回撥，那更是一場噩夢！

再看另一段有關並行化非同步操作的程式碼：

$.get('api1/data', function(resp1) { trackMe(); });
$.get('api2/data', function(resp2) { trackMe(); });
$.get('api3/data', function(resp3) { trackMe(); });
var trackedCount = 0;
function trackMe() {
    ++trackedCount;
    if (trackedCount === 3) {
        doSomethingThatNeededAllThree();
    }
}

上面的程式碼意思是當三個請求都成功就執行我們的函式（只執行一次），毫無疑問，這段程式碼有點繁瑣，而且如果我們要新增失敗回撥將會是一件很麻煩的事情。

我們需要一個更好的規範，那就是Promise規範，這裡引用Aaron的一篇文章中的一段，http://www.cnblogs.com/aaronjs/p/3163786.html：

  • 在我開始promise的“重點”之前，我想我應該給你一點它們如何工作的內貌。一個promise是一個物件——根據Promise/A規範——只需要一個方法：then。then方法帶有三個引數：一個成功回撥，一個失敗回撥，和一個前進回撥（規範沒有要求包括前進回撥的實現，但是很多都實現了）。一個全新的promise物件從每個then的呼叫中返回。
  • 一個promise可以是三種狀態之一：未完成的，完成的，或者失敗的。promise以未完成的狀態開始，如果成功它將會是完成態，如果失敗將會是失敗態。當一個promise移動到完成態，所有註冊到它的成功回撥將被呼叫，而且會將成功的結果值傳給它。另外，任何註冊到promise的成功回撥，將會在它已經完成以後立即被呼叫。
  • 同樣的事情發生在promise移動到失敗態的時候，除了它呼叫的是失敗回撥而不是成功回撥。對包含前進特性的實現來說，promise在它離開未完成狀態以前的任何時刻，都可以更新它的progress。當progress被更新，所有的前進回撥(progress callbacks)會被傳遞以progress的值，並被立即呼叫。前進回撥被以不同於成功和失敗回撥的方式處理；如果你在一個progress更新已經發生以後註冊了一個前進回撥，新的前進回撥只會在它被註冊以後被已更新的progress呼叫。

我們不會進一步深入promise狀態是如何管理的，因為那不在規範之內，而且每個實現都有差別。在後面的例子中，你將會看到它是如何完成的，但目前這就是所有你需要知道的。

現在有不少庫已經實現了Deferred的操作，其中jQuery的Deferred就非常熱門：

先過目一下Deferred的API：
這裡寫圖片描述

這裡寫圖片描述

jQuery的有關Deferred的API簡介：

$.ajax('data/url')
    .done(function(response, statusText, jqXHR){
        console.log(statusText);
    })
    .fail(function(jqXHR, statusText, error){
        console.log(statusText);
    })
    ,always(function(){
        console.log('I will always done.');
    });

1.done,fail,progress都是給回撥列表新增回撥，因為jQuery的Deferred內部使用了其$.Callbacks物件，並且增加了memory的標記（詳情請檢視我的這篇文章jQuery1.9.1原始碼分析–Callbacks物件），

所以如果我們第一次觸發了相應的回撥列表的回撥即呼叫了resolve，resolveWith，reject，rejectWith或者notify，notifyWith這些相應的方法，當我們再次給該回撥列表新增回撥時，就會立刻觸發該回撥了，

即使用了done,fail,progress這些方法，而不需要我們手動觸發。jQuery的ajax會在請求完成後就會觸發相應的回撥列表。所以我們後面的鏈式操作的註冊回撥有可能是已經觸發了回撥列表才新增的，所以它們就會立刻被執行。

2.always方法則是不管成功還是失敗都會執行該回撥。

接下來要介紹重量級的then方法（也是pipe方法）：

3.then方法會返回一個新的Deferred物件
* 如果then方法的引數是deferred物件，
* 上一鏈的舊deferred會呼叫[ done | fail | progress ]方法註冊回撥，該回撥內容是：執行then方法對應的引數回撥（fnDone, fnFail, fnProgress）。
* 1）如果引數回撥執行後返回的結果是一個promise物件，我們就給該promise物件相應的回撥列表新增回撥，該回撥是觸發then方法返回的新promise物件的成功，失敗，處理中（done，fail，progress）的回撥列表中的所有回撥。
* 當我們再給then方法進行鏈式地新增回撥操作（done,fail,progress,always,then）時，就是給新deferred物件註冊回撥到相應的回撥列表。
* 如果我們then引數fnDoneDefer, fnFailDefer, fnProgressDefer得到了解決，就會執行後面鏈式新增回撥操作中的引數函式。
*
* 2）如果引數回撥執行後返回的結果returned不是promise物件，就立刻觸發新deferred物件相應回撥列表的所有回撥,且回撥函式的引數是先前的執行返回結果returned。
* 當我們再給then方法進行鏈式地新增回撥操作（done,fail,progress,always,then）時，就會立刻觸發我們新增的相應的回撥。
*
* 可以多個then連續使用，此功能相當於順序呼叫非同步回撥。

$.ajax({
                            url: 't2.html',
                            dataType: 'html',
                            data: {
                               d: 4
                            }
                         }).then(function(){
                             console.log('success');
                         },function(){
                             console.log('failed');
                         }).then(function(){
                             console.log('second');
                             return $.ajax({
                                 url: 'jquery-1.9.1.js',
                                 dataType: 'script'
                             });
                         }, function(){
                             console.log('second f');
                             return $.ajax({
                                 url: 'jquery-1.9.1.js',
                                 dataType: 'script'
                             });
                         }).then(function(){
                             console.log('success2');
                         },function(){
                             console.log('failed2');
                         });

上面的程式碼，如果第一個對t2.html的請求成功輸出success，就會執行second的ajax請求，接著針對該請求是成功還是失敗，執行success2或者failed2。

如果第一個失敗輸出failed，然後執行second f的ajax請求（注意和上面的不一樣），接著針對該請求是成功還是失敗，執行success2或者failed2。

理解這些對失敗處理很重要。

將我們上面序列化非同步操作的程式碼使用then方法改造後，程式碼立馬變得扁平化了，可讀性也增強了：

  var req1 = $.get('api1/data');
  var req2 = $.get('api2/data');
  var req3 = $.get('api3/data');

  req1.then(function(req1Data){
      return req2.done(otherFunc);
  }).then(function(req2Data){
      return req3.done(otherFunc2);
  }).then(function(req3Data){
      doneSomethingWithReq3();
  });

4.接著介紹$.when的方法使用，主要是對多個deferred物件進行並行化操作，當所有deferred物件都得到解決就執行後面新增的相應回撥。

 1     $.when(
 2         $.ajax({
 3             
 4             url: 't2.html'
 5         
 6         }),
 7         $.ajax({
 8             url: 'jquery-1.9.1-study.js'
 9         })
10     ).then(function(FirstAjaxSuccessCallbackArgs, SecondAjaxSuccessCallbackArgs){
11         console.log('success');
12     }, function(){
13         console.log('failed');
14     });

如果有一個失敗了都會執行失敗的回撥。

將我們上面並行化操作的程式碼改良後：

1     $.when(
2         $.get('api1/data'),
3         $.get('api2/data'),
4         $.get('api3/data'),
5         { key: 'value' }
6     ).done();

5.promse方法是返回的一個promise物件，該物件只能新增回撥或者檢視狀態，但不能觸發。我們通常將該方法暴露給外層使用，而內部應該使用deferred來觸發回撥。

如何使用deferred封裝非同步函式

第一種：

 1 function getData(){
 2   // 1) create the jQuery Deferred object that will be used
 3   var deferred = $.Deferred();
 4   // ---- AJAX Call ---- //
 5   var xhr = new XMLHttpRequest();
 6   xhr.open("GET","data",true);
 7   
 8   // register the event handler
 9   xhr.addEventListener('load',function(){
10     if(xhr.status === 200){
11       // 3.1) RESOLVE the DEFERRED (this will trigger all the done()...)
12       deferred.resolve(xhr.response);
13     }else{
14       // 3.2) REJECT the DEFERRED (this will trigger all the fail()...)
15       deferred.reject("HTTP error: " + xhr.status);
16     }
17   },false) 
18   
19   // perform the work
20   xhr.send();
21   // Note: could and should have used jQuery.ajax. 
22   // Note: jQuery.ajax return Promise, but it is always a good idea to wrap it
23   //       with application semantic in another Deferred/Promise  
24   // ---- /AJAX Call ---- //
25   
26   // 2) return the promise of this deferred
27   return deferred.promise();
28 }

第二種方法：

1 function prepareInterface() {   
2    return $.Deferred(function( dfd ) {   
3        var latest = $( “.news, .reactions” );  
4        latest.slideDown( 500, dfd.resolve );  
5        latest.addClass( “active” );  
6     }).promise();   
7 }

Deferred的一些使用技巧：

1.非同步快取

以ajax請求為例，快取機制需要確保我們的請求不管是否已經存在於快取，只能被請求一次。 因此，為了快取系統可以正確地處理請求,我們最終需要寫出一些邏輯來跟蹤繫結到給定url上的回撥。

 1     var cachedScriptPromises = {};
 2 
 3     $.cachedGetScript =  function(url, callback){
 4         if(!cachedScriptPromises[url]) {
 5             cachedScriptPromises[url] = $.Deferred(function(defer){
 6                 $.getScript(url).then(defer.resolve, defer.reject);
 7             }).promise();
 8         }
 9 
10         return cachedScriptPromises[url].done(callback);
11     };

我們為每一個url快取一個promise物件。 如果給定的url沒有promise，我們建立一個deferred，併發出請求。 如果它已經存在我們只需要為它繫結回撥。 該解決方案的一大優勢是，它會透明地處理新的和快取過的請求。 另一個優點是一個基於deferred的快取 會優雅地處理失敗情況。 當promise以‘rejected’狀態結束的話，我們可以提供一個錯誤回撥來測試：

$.cachedGetScript( url ).then( successCallback, errorCallback );

請記住：無論請求是否快取過，上面的程式碼段都會正常運作！

通用非同步快取

為了使程式碼儘可能的通用，我們建立一個快取工廠並抽象出實際需要執行的任務

 1     $.createCache = function(requestFunc){
 2         var cache = {};
 3 
 4         return function(key, callback){
 5             if(!cache[key]) {
 6                 cache[key] = $.Deferred(function(defer){
 7                     requestFunc(defer, key);
 8                 }).promise();
 9             }
10 
11             return cache[key].done(callback);
12         };
13     };
14 
15 
16     // 現在具體的請求邏輯已經抽象出來，我們可以重新寫cachedGetScript：
17     $.cachedGetScript = $.createCache(function(defer, url){
18         $.getScript(url).then(defer.resolve, defer.reject);
19     });

我們可以使用這個通用的非同步快取很輕易的實現一些場景：

圖片載入

 1 // 確保我們不載入同一個影象兩次
 2     $.loadImage = $.createCache(function(defer, url){
 3         var image = new Image();
 4         function clearUp(){
 5             image.onload = image.onerror = null;
 6         }
 7         defer.then(clearUp, clearUp);
 8         image.onload = function(){
 9             defer.resolve(url);
10         };
11         image.onerror = defer.reject;
12         image.src = url;
13     });
14 
15     // 無論image.png是否已經被載入，或者正在載入過程中，快取都會正常工作。
16     $.loadImage( "my-image.png" ).done( callback1 );  
17     $.loadImage( "my-image.png" ).done( callback1 );

快取響應資料

 1     $.searchTwitter = $.createCache(function(defer, query){
 2         $.ajax({
 3             url: 'http://search.twitter.com/search.json',
 4             data: {q: query}, 
 5             dataType: 'jsonp'
 6         }).then(defer.resolve, defer.reject);
 7     });
 8 
 9 // 在Twitter上進行搜尋，同時快取它們
10     $.searchTwitter( "jQuery Deferred", callback1 );

定時，

基於deferred的快取並不限定於網路請求;它也可以被用於定時目的。

 1     // 新的afterDOMReady輔助方法用最少的計數器提供了domReady後的適當時機。 如果延遲已經過期，回撥會被馬上執行。
 2     $.afterDOMReady = (function(){
 3         var readyTime;
 4         
 5         $(function(){
 6             readyTime = (new Date()).getTime();
 7         });
 8 
 9         return $.createCache(function(defer, delay){
10             delay = delay || 0;
11 
12             $(function(){
13                 var delta = (new Date()).getTime() - readyTime;
14 
15                 if(delta >= delay) {
16                     defer.resolve();
17                 } else {
18                     setTimeout(defer.resolve, delay - delta);
19                 }
20             });
21         });
22     })();

2.同步多個動畫

 1     var fadeLi1Out = $('ul > li').eq(0).animate({
 2         opacity: 0
 3     }, 1000);
 4     var fadeLi2In = $('ul > li').eq(1).animate({
 5         opacity: 1
 6     }, 2000);
 7 
 8      // 使用$.when()同步化不同的動畫
 9     $.when(fadeLi1Out, fadeLi2In).done(function(){
10         alert('done');
11     });

雖然jQuery1.6以上的版本已經把deferred包裝到動畫裡了，但如果我們想要手動實現，也是一件很輕鬆的事：

 1 $.fn.animatePromise = function( prop, speed, easing, callback ) {   
 2     var elements = this;   
 3 
 4     return $.Deferred(function( defer ) {   
 5         elements.animate( prop, speed, easing, function() {   
 6             defer.resolve();   
 7             if ( callback ) {   
 8                 callback.apply( this, arguments );  
 9             }   
10         });   
11     }).promise();  
12 };
13 
14 // 我們也可以使用同樣的技巧，建立了一些輔助方法：
15 $.each([ "slideDown", "slideUp", "slideToggle", "fadeIn", "fadeOut", "fadeToggle" ],   
16 function( _, name ) {   
17     $.fn[ name + "Promise" ] = function( speed, easing, callback ) {  
18         var elements = this;   
19         return $.Deferred(function( defer ) {   
20             elements[ name ]( speed, easing, function() {   
21                 defer.resolve();   
22                 if ( callback ) {   
23                 callback.apply( this, arguments );   
24                 }   
25             });  
26          }).promise();   
27     };   
28 });

3.一次性事件

例如，您可能希望有一個按鈕，當它第一次被點選時開啟一個皮膚，皮膚開啟之後，執行特定的初始化邏輯。 在處理這種情況時，通常會這樣寫程式碼：

1 var buttonClicked = false;   
2 $( "#myButton" ).click(function() {   
3     if ( !buttonClicked ) {   
4         buttonClicked = true;   
5         initializeData();   
6         showPanel();   
7     }   
8 });

這是一個非常耦合的解決辦法。 如果你想新增一些其他的操作，你必須編輯繫結程式碼或拷貝一份。 如果你不這樣做，你唯一的選擇是測試buttonClicked。由於buttonClicked可能是false，新的程式碼可能永遠不會被執行，因此你 可能會失去這個新的動作。

使用deferreds我們可以做的更好 （為簡化起見，下面的程式碼將只適用於一個單一的元素和一個單一的事件型別，但它可以很容易地擴充套件為多個事件型別的集合）：

 1 $.fn.bindOnce = function(event, callback){
 2     var element = this;
 3     defer = element.data('bind_once_defer_' + event);
 4 
 5     if(!defer) {
 6         defer = $.Deferred();
 7 
 8         function deferCallback(){
 9             element.off(event, deferCallback);
10             defer.resolveWith(this, arguments);
11         }
12 
13         element.on(event, deferCallback);
14         element.data('bind_once_defer_' + event, defer);
15     }
16 
17     return defer.done(callback).promise();
18 };
19 
20 $.fn.firstClick = function( callback ) {   
21        return this.bindOnce( "click", callback );  
22  };  
23 
24 var openPanel = $( "#myButton" ).firstClick();   
25 openPanel.done( initializeData );   
26 openPanel.done( showPanel );

該程式碼的工作原理如下：

· 檢查該元素是否已經繫結了一個給定事件的deferred物件

· 如果沒有，建立它，使它在觸發該事件的第一時間解決

· 然後在deferred上繫結給定的回撥並返回promise

4.多個組合使用

單獨看以上每個例子，deferred的作用是有限的 。然而，deferred真正的力量是把它們混合在一起。

*在第一次點選時載入皮膚內容並開啟皮膚

假如，我們有一個按鈕，可以開啟一個皮膚，請求其內容然後淡入內容。使用我們前面定義的方法，我們可以這樣做：

1 var panel = $('#myPanel');
2 panel.firstClick(function(){
3     $.when(
4         $.get('panel.html'),
5         panel.slideDown()
6     ).done(function(ajaxArgs){
7         panel.html(ajaxArgs[0]).fadeIn();
8     });
9 });

*在第一次點選時載入影象並開啟皮膚

假如，我們已經的皮膚有內容，但我們只希望當第一次單擊按鈕時載入影象並且當所有影象載入成功後淡入影象。HTML程式碼如下：

 1 <div id="myPanel">   
 2 <img data-src="image1.png" />  
 3  <img data-src="image2.png" />  
 4  <img data-src="image3.png" />   
 5 <img data-src="image4.png" />   
 6 </div>
 7 
 8 /*
 9 我們使用data-src屬性描述圖片的真實路徑。 那麼使用deferred來解決該用例的程式碼如下：
10 */
11 $('#myBtn').firstClick(function(){
12     var panel = $('#myPanel');
13     var promises = [];
14 
15     $('img', panel).each(function(){
16         var image = $(this);
17         var src = element.data('src');
18 
19         if(src) {
20             promises.push(
21                 $.loadImage(src).then(function(){
22                     image.attr('src', src);
23                 }, function(){
24                     image.attr('src', 'error.png');
25                 })
26             );
27         }
28     });
29 
30     promises.push(panel.slideDown);
31 
32     $.when.apply(null, promises).done(function(){
33         panel.fadeIn();
34     });
35 });

*在特定延時後載入頁面上的影象

假如，我們要在整個頁面實現延遲影象顯示。 要做到這一點，我們需要的HTML的格式如下：

 1 <img data-src="image1.png" data-after="1000" src="placeholder.png" />   
 2     <img data-src="image2.png" data-after="1000" src="placeholder.png" />   
 3     <img data-src="image1.png" src="placeholder.png" />   
 4     <img data-src="image2.png" data-after="2000" src="placeholder.png" /> 
 5 
 6 /*
 7 意思非常簡單：
 8 image1.png，第三個影象立即顯示，一秒後第一個影象顯示
 9 image2.png 一秒鐘後顯示第二個影象，兩秒鐘後顯示第四個影象
10 */
11 
12 $( "img" ).each(function() {  
13     var element = $( this ),  
14         src = element.data( "src" ),  
15         after = element.data( "after" );  
16     if ( src ) {  
17         $.when(  
18             $.loadImage( src ),  
19             $.afterDOMReady( after )  
20         ).then(function() {  
21             element.attr( "src", src );  
22         }, function() {  
23             element.attr( "src", "error.png" );  
24         } ).done(function() {  
25             element.fadeIn();  
26         });  
27     }  
28 }); 
29 
30 // 如果我們想延遲載入的影象本身，程式碼會有所不同：
31 $( "img" ).each(function() {  
32     var element = $( this ),  
33         src = element.data( "data-src" ),  
34         after = element.data( "data-after" );  
35     if ( src ) {  
36         $.afterDOMReady( after, function() {  
37             $.loadImage( src ).then(function() {  
38                 element.attr( "src", src );  
39             }, function() {  
40                 element.attr( "src", "error.png" );  
41             } ).done(function() {  
42                 element.fadeIn();  
43             });  
44         } );  
45     }  
46 });

這裡，我們首先在嘗試載入圖片之前等待延遲條件滿足。當你想在頁面載入時限制網路請求的數量會非常有意義。

Deferred的使用場所：

  • Ajax（XMLHttpRequest）
  • Image Tag，Script Tag，iframe（原理類似）
  • setTimeout/setInterval
  • CSS3 Transition/Animation
  • HTML5 Web Database
  • postMessage
  • Web Workers
  • Web Sockets
  • and more…

相關文章