Deferredは非同期プログラミングを実現します.

1734 ワード

JavaScriptの実行フローは「同期」と「非同期」に分けられます.従来の非同期動作は動作が完了した後、コールバック関数を使って結果を返しますが、コールバック関数には後続の作業が含まれています.コード論理は「線形」で作成することに慣れていますが、大量の非同期動作によってもたらされるコールバック関数は、私たちのアルゴリズムを分解してサポートを破壊します.
アニメーションを例にとって、次のアニメーションは前の実行が終わってから続けられます.流れはコールバック関数に書きます.
//       
$('ele1').animate({opacity:'0.5'},4000,function(){
    $('ele2').animate({width:'100px'},2000,function(){
        $('ele3').animate({height:'0'},2000);
    });
});
上のコードプログラミングロジックも正しいですが、このような非同期ネストのフィードバックロジックに対して、私たちのネストが多くなると、コード構造の階層がますます深くなります.まずは
読むことが難しくなり、強い結合が続き、インターフェースが広がりにくくなります.
jQueryはDeferredの概念を導入しました.Deferredはコードの非同期行為をより優雅にする抽象的なもので、それがあれば、同期コードを書くように書くことができます.
非同期コードこれは複雑に見えますが、実は核心をつかんで使ってもいいです.DeferredオブジェクトはjQueryのコールバック関数ソリューションです.はい、
英語ではdeferは「遅延」を意味していますので、deferredオブジェクトの意味は「遅延」から未来のある点まで実行します.
Deferredによって処理されたコードは、コード量が多すぎるように見えますが、実際には、コードの実行部分ごとにパッケージされています.
起きて、Deferredのインターフェースだけを残して処理して、私達が実行する流れのコントロールをDeferredに手渡しましたに等しいです.このような利点は私達が入れ子関数を書く時です.
deferredが提供するパイプスタイルで同期コードを作成できます.
コードの例:
function animate1() {
    var dtd = $.Deferred(); //   Deferred  
    $("#block1").animate({width:400px},2000,function() {
        dtd.resolve(); //   Deferred        “   ”
    });
    return dtd;
}
function animate2() {
    var dtd = $.Deferred(); //   Deferred  
    $("#block2").animate({width:"50%"}, 2000, function() {
        dtd.resolve(); //   Deferred        “   ”
    });
    return dtd;
}
var anim = animate1();
anim.then(function() {
    $("#block1").text('block1    ');
    return animate2();
}).then(function() {
    $("#block2").text('block2    ');
});