JQuery的異步回調支援 - Promise、Deferred

1、Deferred對象：

一般在函數内部進行聲明，并在運作過程中改變其狀态，例如成功或失敗，最終傳回Promise對象用于狀态監聽。

主要方法：

Deferred.resolve(param...) ：執行成功，将會觸發Promise對象的done回調方法。

Deferred.reject(param...) ：執行失敗，将會觸發Promise對象的fail回調方法。

Deferred.notify(param...) ：正在執行，将會觸發Promise對象的progress回調方法。

Deferred.promise() ：傳回Promise對象執行個體。

其他說明：

使用 $.Deferred() 即可聲明一個Deferred對象。

2、Promise對象：

可以将其看作Deferred的一個執行個體，在函數狀态改變時将會觸發Promise對象的相應回調方法。

Promise.done(callback) ：執行成功時的回調方法。

Promise.fail(callback) ：執行失敗時的回調方法。

Promise.progress(callback) ：正在執行時的回調方法。

Promise.always(callback) ：隻要Deferred的狀态發生改變就會觸發always方法，類似于finally。

Promise.then(doneCallback, failCallback, progressCallback) ：另外一種定義回調函數的方式。

Promise的所有方法均傳回Promise對象，是以可以鍊式調用，比如：Promise.done(funA).fail(funB).always(funC)

JQuery的Ajax方法預設傳回Promise對象，是以可以直接使用Promise的各種回調方法。

3、代碼示例：

1 //-- 全局變量 ---------------------------
 2 var flagA = flagB = flagC = "";
 3 
 4 //-- Fun : waitA ---------------------------
 5 var waitA = function(ms){
 6     if(!ms) ms = 2000;
 7     var def = $.Deferred();
 8     setTimeout( function(){ flagA = "waitA執行成功"; def.resolve(flagA); }, ms);
 9     return def.promise();
10 };
11 //-- Fun : waitB ---------------------------
12 var waitB = function(ms){
13     if(!ms) ms = 2000;
14     var def = $.Deferred();
15     setTimeout( function(){ flagB = "waitB執行失敗"; def.reject(flagB); }, ms);
16     return def.promise();
17 };
18 //-- Fun : waitC ---------------------------
19 var waitC = function(ms){
20     if(!ms) ms = 2000;
21     var def = $.Deferred();
22     setTimeout( function(){ flagC = "waitC執行失敗"; def.reject(flagC); }, ms);
23     return def.promise();
24 };
25 
26 //-- 調用方式一：
27 waitA(2000).done(function(msg){
28     console.info(msg);
29 }).fail(function(msg){
30     console.info(msg);
31 }).always(function(msg){
32     console.info(msg);
33 });
34 
35 //-- 調用方式二：
36 waitA(2000).then(function(msg){
37     console.info(msg);
38 }, function(msg){
39     console.info(msg);
40 });
41 
42 //--調用方式三：
43 $.when(waitA(2000)).then(function(msg){
44     console.info(msg);
45 }, function(msg){
46     console.info(msg);
47 });
48 
49 //--調用方式四：按順序執行三個函數
50 $.when(waitA(2000)).then(waitB).then(waitC);
51 //或者：
52 $.when(waitA(2000)).then(function(msg){
53     console.info(msg);
54     waitB(2000).then(function(msg){
55         console.info(msg);
56         waitC(2000).then(function(msg){
57             console.info(msg);
58         });
59     });
60 });
61 
62 //--調用方式五：同時執行三個函數
63 $.when(waitA(1000), waitB(2000), waitC(3000)).then(function(mes){
64     console.info("全部執行成功！" + mes);
65 }, function(mes){
66     console.warn("未全部執行成功，其中：" + mes);
67 });      

寵辱不驚，看庭前花開花落；去留無意，望天上雲卷雲舒