jQuery中的$.Deferred、$.when非同步作業

標籤：

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

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

　　$.Deferred來實現上面的操作

1     var deferred = $.Deferred();2     setTimeout(function(){3         console.log(1); // 14         deferred.resolve();// 25     }, 1000);6     deferred.done(function(){7         console.log(2);8     });

 

$.Deferred的三隊抽象1、resolve-》done-》$.Callbacks(‘once memory‘)-》成功-》只觸發一次2、reject-》fail-》$.Callbacks(‘once memory‘)-》失敗-》只觸發一次3、notify-》progress-》$.Callbacks(‘memory‘)-》通知-》不斷觸發直到resolve或reject

 1     var deferred = $.Deferred(); 2     setTimeout(function(){ 3         //deferred.resolve(); // success 4         deferred.reject(); // error 5         //deferred.notify(); // progressing 6     }, 1000); 7     deferred.done(function(){ 8         console.log(‘success‘); 9     }).fail(function(){10         console.log(‘error‘);11     }).progress(function(){12         console.log(‘progressing‘);13     });

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

 1     var deferred = $.Deferred(); 2     setTimeout(function(){ 3         deferred.resolve();// 1 4     }, 100); 5     deferred.done(function(){ 6        console.log(1); 7     }); 8     $(‘#btn‘).on(‘click‘, function () { 9         deferred.done(function(){10             console.log(2); // 2...只要單擊一次按鈕就會觸發一次11         });12     });

 

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

 1     function fn(){ 2         var deferred = $.Deferred(); 3         setTimeout(function(){ 4             deferred.resolve();// 不會觸發，狀態在外部被修改了。 5         }); 6         return deferred; 7     } 8     var newDeferred = fn(); 9     newDeferred.done(function(){10         console.log(‘success‘);11     }).fail(function(){12         console.log(‘error‘);13     });14     newDeferred.reject(); // error

 1     function fn(){ 2         var deferred = $.Deferred(); 3         setTimeout(function(){ 4             deferred.resolve();// success 5         }); 6         return deferred.promise(); 7     } 8     var newDeferred = fn(); 9     newDeferred.done(function(){10         console.log(‘success‘);11     }).fail(function(){12         console.log(‘error‘);13     });14     newDeferred.reject(); // 報錯 reject方法不存在

 

其他方法介紹1、state：返回延遲物件的狀態　　pending：建立對象時的狀態　　resolved：回調成功-會禁用失敗和notify的回調　　rejected：回調失敗-會禁用成功和notify的回調2、always：不管成功或失敗都會觸發3、then：傳遞三個方法分別處理三個操作4、pipe：延遲物件過濾器？resolve、done、reject、fail、notify、progress

jQuery中的$.Deferred、$.when非同步作業