jQuery中的Deferred-詳解和使用

 

首先，為什么要使用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對象都得到解決就執行后面添加的相應回調。

    $.when(
        $.ajax({
            
            url: 't2.html'
        
        }),
        $.ajax({
            url: 'jquery-1.9.1-study.js'
        })
    ).then(function(FirstAjaxSuccessCallbackArgs, SecondAjaxSuccessCallbackArgs){
        console.log('success');
    }, function(){
        console.log('failed');
    });

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

將我們上面並行化操作的代碼改良后：

    $.when(
        $.get('api1/data'),
        $.get('api2/data'),
        $.get('api3/data'),
        { key: 'value' }
    ).done();

 

5.promse方法是返回的一個promise對象，該對象只能添加回調或者查看狀態，但不能觸發。我們通常將該方法暴露給外層使用，而內部應該使用deferred來觸發回調。

 

如何使用deferred封裝異步函數

 第一種：

function getData(){
  // 1) create the jQuery Deferred object that will be used
  var deferred = $.Deferred();
  // ---- AJAX Call ---- //
  var xhr = new XMLHttpRequest();
  xhr.open("GET","data",true);
  
  // register the event handler
  xhr.addEventListener('load',function(){
    if(xhr.status === 200){
      // 3.1) RESOLVE the DEFERRED (this will trigger all the done()...)
      deferred.resolve(xhr.response);
    }else{
      // 3.2) REJECT the DEFERRED (this will trigger all the fail()...)
      deferred.reject("HTTP error: " + xhr.status);
    }
  },false) 
  
  // perform the work
  xhr.send();
  // Note: could and should have used jQuery.ajax. 
  // Note: jQuery.ajax return Promise, but it is always a good idea to wrap it
  //       with application semantic in another Deferred/Promise  
  // ---- /AJAX Call ---- //
  
  // 2) return the promise of this deferred
  return deferred.promise();
}

第二種方法：

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

 

 

Deferred的一些使用技巧：

 1.異步緩存

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

 

    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);
    };

 

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

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

請記住：無論請求是否緩存過，上面的代碼段都會正常運作！

 

通用異步緩存

為了使代碼盡可能的通用，我們建立一個緩存工廠並抽象出實際需要執行的任務

    $.createCache = function(requestFunc){
        var cache = {};

        return function(key, callback){
            if(!cache[key]) {
                cache[key] = $.Deferred(function(defer){
                    requestFunc(defer, key);
                }).promise();
            }

            return cache[key].done(callback);
        };
    };


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

我們可以使用這個通用的異步緩存很輕易的實現一些場景：

圖片加載

// 確保我們不加載同一個圖像兩次
    $.loadImage = $.createCache(function(defer, url){
        var image = new Image();
        function clearUp(){
            image.onload = image.onerror = null;
        }
        defer.then(clearUp, clearUp);
        image.onload = function(){
            defer.resolve(url);
        };
        image.onerror = defer.reject;
        image.src = url;
    });

    // 無論image.png是否已經被加載，或者正在加載過程中，緩存都會正常工作。
    $.loadImage( "my-image.png" ).done( callback1 );  
    $.loadImage( "my-image.png" ).done( callback1 );  

緩存響應數據

    $.searchTwitter = $.createCache(function(defer, query){
        $.ajax({
            url: 'http://search.twitter.com/search.json',
            data: {q: query}, 
            dataType: 'jsonp'
        }).then(defer.resolve, defer.reject);
    });

// 在Twitter上進行搜索，同時緩存它們
    $.searchTwitter( "jQuery Deferred", callback1 ); 

定時， 

基於deferred的緩存並不限定於網絡請求;它也可以被用於定時目的。

 

    // 新的afterDOMReady輔助方法用最少的計數器提供了domReady后的適當時機。 如果延遲已經過期，回調會被馬上執行。
    $.afterDOMReady = (function(){
        var readyTime;
        
        $(function(){
            readyTime = (new Date()).getTime();
        });

        return $.createCache(function(defer, delay){
            delay = delay || 0;

            $(function(){
                var delta = (new Date()).getTime() - readyTime;

                if(delta >= delay) {
                    defer.resolve();
                } else {
                    setTimeout(defer.resolve, delay - delta);
                }
            });
        });
    })();

 

 

2.同步多個動畫

    var fadeLi1Out = $('ul > li').eq(0).animate({
        opacity: 0
    }, 1000);
    var fadeLi2In = $('ul > li').eq(1).animate({
        opacity: 1
    }, 2000);

     // 使用$.when()同步化不同的動畫
    $.when(fadeLi1Out, fadeLi2In).done(function(){
        alert('done');
    });

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

$.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();  
};

// 我們也可以使用同樣的技巧，建立了一些輔助方法：
$.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();   
    };   
});

 

 

3.一次性事件

例如，您可能希望有一個按鈕，當它第一次被點擊時打開一個面板，面板打開之后，執行特定的初始化邏輯。 在處理這種情況時，通常會這樣寫代碼：

var buttonClicked = false;   
$( "#myButton" ).click(function() {   
    if ( !buttonClicked ) {   
        buttonClicked = true;   
        initializeData();   
        showPanel();   
    }   
}); 

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

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

 

$.fn.bindOnce = function(event, callback){
    var element = this;
    defer = element.data('bind_once_defer_' + event);

    if(!defer) {
        defer = $.Deferred();

        function deferCallback(){
            element.off(event, deferCallback);
            defer.resolveWith(this, arguments);
        }

        element.on(event, deferCallback);
        element.data('bind_once_defer_' + event, defer);
    }

    return defer.done(callback).promise();
};

$.fn.firstClick = function( callback ) {   
       return this.bindOnce( "click", callback );  
 };  

var openPanel = $( "#myButton" ).firstClick();   
openPanel.done( initializeData );   
openPanel.done( showPanel ); 

 

該代碼的工作原理如下：

· 檢查該元素是否已經綁定了一個給定事件的deferred對象

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

· 然后在deferred上綁定給定的回調並返回promise

4.多個組合使用

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

*在第一次點擊時加載面板內容並打開面板

 

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

var panel = $('#myPanel');
panel.firstClick(function(){
    $.when(
        $.get('panel.html'),
        panel.slideDown()
    ).done(function(ajaxArgs){
        panel.html(ajaxArgs[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屬性描述圖片的真實路徑。 那么使用deferred來解決該用例的代碼如下：
*/
$('#myBtn').firstClick(function(){
    var panel = $('#myPanel');
    var promises = [];

    $('img', panel).each(function(){
        var image = $(this);
        var src = element.data('src');

        if(src) {
            promises.push(
                $.loadImage(src).then(function(){
                    image.attr('src', src);
                }, function(){
                    image.attr('src', 'error.png');
                })
            );
        }
    });

    promises.push(panel.slideDown);

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

*在特定延時后加載頁面上的圖像

假如，我們要在整個頁面實現延遲圖像顯示。 要做到這一點，我們需要的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 一秒鍾后顯示第二個圖像，兩秒鍾后顯示第四個圖像
*/

$( "img" ).each(function() {  
    var element = $( this ),  
        src = element.data( "src" ),  
        after = element.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.data( "data-src" ),  
        after = element.data( "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();  
            });  
        } );  
    }  
});  

 

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

 

 

Deferred的使用場所：

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

 

相關資源：

1.jQuery1.9.1源碼分析--Callbacks對象

2.jQuery1.9.1源碼分析--Deferred對象和Promise對象

3.Creating Responsive Applications Using jQuery D...

4.關於異步Promises

5.移動web app開發必備 - 異步隊列 Deferred