jQuery中的$.Deferred、$.when異步操作

前言

　　網頁中常常會出現一些耗時比較長的操作，如ajax請求服務器數據，這些操作都不能立即得到結果。如果我們需要在這些操作執行完后來進行另外的操作，我們就需要將這些操作放在回調函數中，$.Deferred就是jQuery用來處理回調操作的。jQuery中的$.Deferred對$.Callbacks很有依賴，看看$.Callbacks執行回調。

    var callbacks = $.Callbacks();
    setTimeout(function(){
        console.log(1); // 1
        callbacks.fire(); // 2 add中的方法也會執行(同步的寫法，異步執行)
    }, 1000);
    callbacks.add(function(){
        console.log(2);
    });

　　$.Deferred來實現上面的操作

    var deferred = $.Deferred();
    setTimeout(function(){
        console.log(1); // 1
        deferred.resolve();// 2
    }, 1000);
    deferred.done(function(){
        console.log(2);
    });

 

$.Deferred的三隊抽象

1、resolve-》done-》$.Callbacks('once memory')-》成功-》只觸發一次

2、reject-》fail-》$.Callbacks('once memory')-》失敗-》只觸發一次

3、notify-》progress-》$.Callbacks('memory')-》通知-》不斷觸發直到resolve或reject

    var deferred = $.Deferred();
    setTimeout(function(){
        //deferred.resolve(); // success
        deferred.reject(); // error
        //deferred.notify(); // progressing
    }, 1000);
    deferred.done(function(){
        console.log('success');
    }).fail(function(){
        console.log('error');
    }).progress(function(){
        console.log('progressing');
    });

下面是一個比較有意思的用法：memory的記憶功能。

    var deferred = $.Deferred();
    setTimeout(function(){
        deferred.resolve();// 1
    }, 100);
    deferred.done(function(){
       console.log(1);
    });
    $('#btn').on('click', function () {
        deferred.done(function(){
            console.log(2); // 2...只要單擊一次按鈕就會觸發一次
        });
    });

 

deferred和promise

　　$.Deferred會有兩個延遲對象，分別是deferred和promise。deferred包含有所有的方法，而promise不包含改變延遲對象狀態的三個方法resolve、reject、notify。這樣做的好處就是在某些時候對外不提供改變對象狀態的方法，以免延遲對象的狀態混亂。

    function fn(){
        var deferred = $.Deferred();
        setTimeout(function(){
            deferred.resolve();// 不會觸發，狀態在外部被修改了。
        });
        return deferred;
    }
    var newDeferred = fn();
    newDeferred.done(function(){
        console.log('success');
    }).fail(function(){
        console.log('error');
    });
    newDeferred.reject(); // error

    function fn(){
        var deferred = $.Deferred();
        setTimeout(function(){
            deferred.resolve();// success
        });
        return deferred.promise();
    }
    var newDeferred = fn();
    newDeferred.done(function(){
        console.log('success');
    }).fail(function(){
        console.log('error');
    });
    newDeferred.reject(); // 報錯 reject方法不存在

 

其他方法介紹

1、state：返回延遲對象的狀態

　　pending：創建對象時的狀態

　　resolved：回調成功-會禁用失敗和notify的回調

　　rejected：回調失敗-會禁用成功和notify的回調

2、always：不管成功或失敗都會觸發

3、then：傳遞三個方法分別處理三個操作

4、pipe：延遲對象過濾器？

resolve、done、reject、fail、notify、progress

$.when

1、$.when(deferred)：一個延遲對象。

2、$.when(deferred, deferred,...)：多有的延遲對象都調用了resolve()時才執行done；只要有一個延遲對象調用了reject()就會執行fail()。

    function fn1(){
        var deferred = $.Deferred();
        setTimeout(function(){
            deferred.resolve();
        }, 1000);
        return deferred.promise();
    }
    function fn2(){
        var deferred = $.Deferred();
        setTimeout(function(){
            deferred.resolve();
        }, 1000);
        return deferred.promise();
    }
    $.when(fn1(), fn2()).done(function(){
        console.log('success'); // 都resolve() success
    }).fail(function(){
        console.log('error'); // 有一個reject() error
    });

　3、如果參數不是延遲對象就會跳過該參數並代表成功，如果參數都不是延遲對象，也會成功，會執行done。

    function fn1(){
        var deferred = $.Deferred();
        setTimeout(function(){
            deferred.resolve();
        }, 1000);
        return deferred.promise();
    }
    $.when(fn1(), 123).done(function(){
        console.log('success'); // fn1()->resolve() success
    }).fail(function(){
        console.log('error'); // fn1()->reject() error
    });

NOTE：成功或失敗的回調函數的參數對應when中的參數，如果參數是延遲對象回調函數得到undefined，不是延遲對象得到參數值。

    function fn1(){
        var deferred = $.Deferred();
        setTimeout(function(){
            deferred.resolve();
        }, 1000);
        return deferred.promise();
    }
    $.when(fn1(), 123).done(function(arg1, arg2){
        console.log(arg1);// undefined
        console.log(arg2);//123
        console.log('success'); // fn1()->resolve() success
    }).fail(function(){
        console.log('error'); // fn1()->reject() error
    });