Deferredの知識

モバイル開発のさまざまな分野で、次のような非同期コールバックの問題に直面します.
1:Css 3実行動画完了、コールバック
2:Jquery Animateアニメーションの実行完了、コールバック
3:Ajaxの実行(パラレル、シリアル)、コールバック
など
 
 
1つ目のケース:利用可能、Modernizr.jsはCss 3アニメーションの完了したイベントコールバックをカプセル化しました:

/*------  Modernizr    Css3      -------*/
        var animEndEventNames = {
            'WebkitAnimation' : 'webkitAnimationEnd',
            'OAnimation' : 'oAnimationEnd',
            'msAnimation' : 'MSAnimationEnd',
            'animation' : 'animationend'
        };
this.animEndEventName = animEndEventNames[Modernizr.prefixed('animation')];


$("#Elemen").addClass("pt-page-current").addClass(optionClass.inClass).on(_this.animEndEventName, function() {

                        $(nextEle).off(_this.animEndEventName);

                        _this.endWithAnimationInit($(currentEle),$(nextEle));
                        _this.removeWithAnimationClass($(currentEle),$(nextEle),optionClass);

                        /*******  ajax    (         )********/
                        _this.GestureAjax(_this.defaultOptions.nextJspPage,_this.defaultOptions.requestAjaxJsp);
});

 
 
(2番目、3番目)の場合、jQueryでは、多くの操作がDeferredまたはpromiseを返します.Animate 、Ajax:次のとおりです.

// animate
$('.box')
    .animate({'opacity': 0}, 1000)
    .promise()
    .then(function() {
        console.log('done');
    });
 
// ajax
$.ajax(options).then(success, fail);
$.ajax(options).done(success).fail(fail);
 
// ajax queue
$.when($.ajax(options1), $.ajax(options2))
    .then(function() {
        console.log('all done.');
    }, function() {
        console.error('There something wrong.');
    });

 
Deferredの定義:
DeferredはPromises/Aに基づくものであり、Promisesは非同期プログラミングモデルであり、一連のAPIによって非同期動作を正規化することで、非同期動作のフロー制御をより容易にすることができる.
Promisesは初心者にとって曲線を理解するのはまだ急峻であるため、ここでは逐次漸進的に紹介し、同時に最も簡単なPromises/Aコードを実現する.
Promises/Aには「thenable」という別名があり、「できるthen」です.ここでpromiseには、[デフォルト、完了、失敗](Default、Complete、Failure)の3つのステータスがあります.初期作成時はデフォルトで、ステータスはデフォルトから完了に変更するか、デフォルトから失敗に変更できます.完了または失敗すると、状態は定義されたインタフェースを変更することができない.
 
複数のアニメーションを同期
アニメーションは、別の一般的な非同期タスクの例です.しかし、いくつかの関連のないアニメーションが完了した後も、コードを実行するのは難しい.
jQuery 1では.6では、アニメーション要素でpromiseオブジェクトを取得する機能が提供されていますが、手動で実現するのは簡単です.

$.fn.animatePromise = function( prop, speed, easing, callback ) { 
    var elements = this; 
    return $.Deferred(function( defer ) { 
        elements.animate( prop, speed, easing, function() { 
        defer.resolve(); 
        if ( callback ) { 
        callback.apply( this, arguments );
         } 
        }); 
    }).promise();
};

var fadeDiv1Out = $( "#div1" ).animatePromise({ opacity: 0 }), 
      fadeDiv2In = $( "#div1" ).animatePromise({ opacity: 1 }, "fast" ); 

$.when( fadeDiv1Out, fadeDiv2In ).done(function() { 
     /* both animations ended */
 });

 
JQuery Promie(Defered)注意:
1、thenは継続タスク呼び出し方式(Continuation tasks)をサポートし、doneはサポートしない
例えばthenはこのように使うことができますが、doneはできません.
promise().then().then().then() 
2.thenは未処理の異常をキャプチャしてエラー状態を戻り値として返し、doneは異常を直接投げ出す
 
----文章の推薦---
Javascript Promiseのヒント:
http://www.alloyteam.com/2014/05/javascript-promise-mode/
 
Aaronの記事:
http://www.cnblogs.com/aaronjs/p/3169328.html