jQuery deferred對象API詳解

jQuery在1.5開始引入deferred(延遲)，簡單說，deferred對象就是jQuery的回調函數解決方案。

jQuery1.5中，Deferred對象提供一種方式來註冊多個回調,添加到自已管理的回調隊列中，調用適當的回調隊列，並轉達同步或異步函數的成功或失敗狀態。
deferred對象有三種執行狀態：未完成（pending），已完成（resolved）和已失敗（rejected）

API概覽:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51

deferred object = {      always(alwaysCallbacks [, alwaysCallbacks])      //延遲對象無論成功或失敗都最終會執行該方法        done(doneCallbacks)      //延遲對象成功完成後調用        fail(failCallbacks)      //延遲對象失敗後調用        isRejected()      //肯定延遲對象是否已失敗        isResolved()      //肯定延遲對象是否已成功        notify( args )      //用來觸發一個自定義事件fireEvent        notifyWith(context, [args])      //跟notify同樣，但能夠指定上下文        pipe([doneFilter] [, failFilter] [, progressFilter] )      //jQuery的1.8，deferred.pipe（）方法已經被淘汰。      //用deferred.then()替代        progress( progressCallbacks )      //用來監控函數執行過程，進度處理程序，見：notify 方法        reject([args])      //使延遲對象的狀態變爲失敗，對應的回調函數綁定方法爲fail。        rejectWith(context, [args])      //使用方法與reject同樣，可是能夠指定上下文，使用能夠參考 resolveWidth        resolve([args])      //使延遲對象的狀態變爲成功，對應的回調函數綁定方法爲done。        resolveWith(context, [args])      //使用方法與resolve同樣，可是能夠指定上下文        state()      //查詢延遲對象的狀態，有三種：pending resolved rejected        then(doneCallbacks, failCallbacks [, progressCallbacks])      //一種縮寫，用法與done,fail同樣        promise([target])      //在原來的deferred對象上返回另外一個deferred對象，      //這個新的deferred對象屏蔽了改變狀態的方法。 }

入門應用：

1 2 3

$.ajax( "test.php" ) .done( function (){ alert( "成功了！" ); }) .fail( function (){ alert( "出錯啦！" ); });

從1.5開始，ajax對象再也不返回xhr對象，而是deferred對象。經過.done執行成功回調，經過.fail執行失敗回調。

一、$.when
返回一個Deferred對象，容許你爲多個事件指定一個回調函數。

1 2 3

$.when($.ajax( "test.php" ),$.ajax( "test2.php" )) .done( function (){ alert( "成功了！" ); }) .fail( function (){ alert( "出錯啦！" ); });

這是一個與操做，只有test.php和test2.php都成功時纔會執行done，不然執行fail;

二、resolve和reject的用法

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

var def = $.Deferred(); //建立deferred對象 var readConf = function (){      fs.readFile( 'test.txt' , 'utf-8' , function (err, data) {          if (err) {             def.reject(); //改變deferred對象狀態成失敗          } else {             def.resolve(); //改變deferred對象狀態成成功          }      });      return def;  //返回 }   $.when(readConf()) .done( function (){ alert( "成功了！" ); }) .fail( function (){ alert( "出錯啦！" ); });

三、promise用法
例2中，定義的def爲全局變量，在做用域範圍內，能夠經過def.reject()或def.resolve()來改變其自己的狀態，這樣影響def的安全性，promise在原來的deferred對象上返回另外一個deferred對象，這個新的deferred對象屏蔽了改變狀態的方法。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

var def = $.Deferred(); //建立deferred對象 var readConf = function (){      fs.readFile( 'test.txt' , 'utf-8' , function (err, data) {          if (err) {             def.reject(); //改變deferred對象狀態成失敗          } else {             def.resolve(); //改變deferred對象狀態成成功          }      });      return def.promise();  //經過promise返回deferred對象，起到狀態保護做用 }   $.when(readConf()) .done( function (){ alert( "成功了！" ); }) .fail( function (){ alert( "出錯啦！" ); });   def.reject(); //更改無效

四、notify和progress用法
二者通常結合使用，有點自定義事件的意思。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

var def = $.Deferred(); //建立deferred對象 var readConf = function (){      def.notify( 'start' );      fs.readFile( 'test.txt' , 'utf-8' , function (err, data) {          if (err) {              def.reject(); //改變deferred對象狀態成失敗              def.notify( 'fail' );          } else {              def.resolve(); //改變deferred對象狀態成成功              def.notify( 'success' );          }      });      return def; }   $.when(readConf()) .progress( function (_event){      console.log(_event); //打印start,fail 或 start,success      //_event是def.notify參數中指定的自定義事件名，是一個字符串      //此處能夠跟據不一樣事件進行相應的邏輯處理 });

五、then用法

1 2	$.when(readConf()) .then( function (){ alert( "成功了！" ); }, function (){ alert( "出錯啦！" ); });