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、代码示例：

 //-- 全局变量 ---------------------------
 var flagA = flagB = flagC = "";

 //-- Fun : waitA ---------------------------
 var waitA = function(ms){
     if(!ms) ms = 2000;
     var def = $.Deferred();
     setTimeout( function(){ flagA = "waitA执行成功"; def.resolve(flagA); }, ms);
     return def.promise();
 };
 //-- Fun : waitB ---------------------------
 var waitB = function(ms){
     if(!ms) ms = 2000;
     var def = $.Deferred();
     setTimeout( function(){ flagB = "waitB执行失败"; def.reject(flagB); }, ms);
     return def.promise();
 };
 //-- Fun : waitC ---------------------------
 var waitC = function(ms){
     if(!ms) ms = 2000;
     var def = $.Deferred();
     setTimeout( function(){ flagC = "waitC执行失败"; def.reject(flagC); }, ms);
     return def.promise();
 };

 //-- 调用方式一：
 waitA(2000).done(function(msg){
     console.info(msg);
 }).fail(function(msg){
     console.info(msg);
 }).always(function(msg){
     console.info(msg);
 });

 //-- 调用方式二：
 waitA(2000).then(function(msg){
     console.info(msg);
 }, function(msg){
     console.info(msg);
 });

 //--调用方式三：
 $.when(waitA(2000)).then(function(msg){
     console.info(msg);
 }, function(msg){
     console.info(msg);
 });

 //--调用方式四：按顺序执行三个函数
 $.when(waitA(2000)).then(waitB).then(waitC);
 //或者：
 $.when(waitA(2000)).then(function(msg){
     console.info(msg);
     waitB(2000).then(function(msg){
         console.info(msg);
         waitC(2000).then(function(msg){
             console.info(msg);
         });
     });
 });

 //--调用方式五：同时执行三个函数
 $.when(waitA(1000), waitB(2000), waitC(3000)).then(function(mes){
     console.info("全部执行成功！" + mes);
 }, function(mes){
     console.warn("未全部执行成功，其中：" + mes);
 });