jqueryのdeferredオブジェクトを二言三言話して

6736 ワード

deferredオブジェクトは何ですか?食べられますか
食べられません.簡単に言えば、deferredオブジェクトはjquery-1.5から導入された新しいもので、いろいろな遅延や非同期イベントをより便利に処理できるツールです(イベントという言葉が不合理で、私もどう言っているのか分かりません).これらの遅延または非同期イベントは最終的にコールバック関数によって処理されることを知っています.deferredオブジェクトの出現は、これらのコールバック関数をよりよく管理し、私たちの書いたコードをよりさっぱりして読むことができるようにするためです.
これを言って何の役に立つのか、例を挙げてみましょう.
ええ...いいですよ.非同期といえば、頭の中の最初の反応はもちろんajaxです.まず、jqueryの典型的なajaxの書き方を見てみましょう.
$.ajax({
   url:'test.php',
   success:function(){alert('ok')},
   error:function(){alert('error')}  
});

ただし、deferredオブジェクトを導入すると、jquery-1.5以降のバージョンでは、次のように書くことができます.
$.ajax({url:'test.php'}).done(function(){alert('ok')}).fail(function(){alert('error')});

またはより明確な書き方:
var dfd = $.ajax({url:'test.php'});
dfd.done(function(){alert('ok')})
   .fail(function(){alert('error')})
   .done(function(){alert('ok again')})//       
   .fail(function(){alert('error again')})//       

はい、ajaxメソッドが返すオブジェクトはdone()、fail()のようなメソッドを使用できます.done()メソッドはajaxリクエストが成功したときに呼び出されるメソッドで、元のajaxパラメータのsuccessに相当し、fail()メソッドはajaxリクエストが失敗したときに呼び出されるメソッドで、元のajaxパラメータのerrorに相当します.どうしてこのような方法を使うことができますか?1.5以降、jqueryのajaxメソッド(get、postなども含む)はxhrオブジェクトではなくdeferredオブジェクトを返すため、done()、fail()などのメソッドがdeferredオブジェクトによって提供される.deferredオブジェクトの完全なメソッドおよびプロパティについては、jqueryの公式マニュアルを参照してください.

だからこれはdeferredオブジェクトの最初の利点です:私たちは登録イベントのようにコールバック関数を登録することができて、しかも1つの遅延あるいは非同期のイベントは複数のコールバック関数を持つことができて、もし論理の複雑なコールバック処理が必要ならば、これはとても便利です
それで?
次に、1つのイベントに複数のコールバック関数があるだけでなく、複数のイベントが1つのコールバック関数を共有することもできます.例を挙げます.
$.when(
   $.get('a.php'),
   $.get('b.php'),
   $.post('c.php')       
).done(function(){alert('ok')})//  ajax         
 .fail(function(){alert('error')});//     ajax        

 $.when()は1つ以上のdeferredオブジェクトを受け入れ、コールバック関数を共有させることができます(もちろん複数でもいいですが、doneやfailメソッドを登録すればいいだけです)、ほほほ、deferredオブジェクトがない前にこのような効果を実現するには複雑な多層コールバック関数でネストする必要がありますが、今は簡単ではないでしょうか.
前述したdeferredオブジェクトは、jquery内部メソッドによって返され、成功または失敗のステータスもjqueryによって与えられます.また、独自のdeferredオブジェクトを手動で作成し、その状態を制御することもできます.
var dfd = $.Deferred();//  ,          Deferred  

deferredオブジェクトが作成されたら何をしますか?もちろんコールバック関数を登録しました.結局、deferredオブジェクトは、その上に登録されている異なるコールバック関数をその異なる状態に基づいて呼び出すことができるものです.その状態の変更は遅延または非同期であり、手動で変更することもでき、状態が変更されると、対応するコールバック関数が実行されます.
var dfd = $.Deferred(); //    deferred  
dfd.done(function(){alert('ok')});//               
setTimeout(function(){
    dfd.resolve();//5            deferred         ,     , done()            
},5000);

ここでdeferredオブジェクトの状態についてお話しします.deferredオブジェクトには、成功、失敗、成功でも失敗でもない3つの状態があります.deferredオブジェクトは、成功と失敗の2つのステータスの変更をリスニングし、対応するコールバック関数を呼び出します.deferredオブジェクトを新規作成すると、初期状態は成功でも失敗でもなく、リスニングされません.注意すべきは、deferredオブジェクトの状態は1回しか変更できません.たとえば、1つのdeferredオブジェクトを初期状態から成功状態に変更した後、再び失敗状態に変更することはできません.
deferredオブジェクトのステータスを手動で成功に変更するには、resolve()メソッドを使用し、ステータスを失敗に変更するにはreject()メソッドを使用します.
promiseオブジェクト
deferredオブジェクトのpromise()メソッドを使用すると、promiseオブジェクトが得られます.では、このpromiseの対象は何ですか.このように、promiseオブジェクトは簡略化されたdeferredオブジェクトに相当し、deferredオブジェクトの状態を変更できるいくつかの方法を削除し、done、fail、always、stateなど、いくつかのバインドコールバック関数と現在の状態を表示する方法を提供します.だから、私たちがプログラムを書くときに外に露出したのは、直接的なdeferredオブジェクトではなく、deferredオブジェクトのpromiseオブジェクトであることが望ましい.そうすれば、外部のプログラムがdeferredオブジェクトの状態を修正することを防止することができる.
function creatDeferred(){//  Deferred  
    var dfd = $.Deferred();
     setTimeout(function(){
         dfd.resolve();     
     },3000);
     return dfd.promise();//    promise            
}
var dfd = creatDeferred();    Deferred  ,         promise  
dfd.done(function(){alert('ok')});
dfd.resolve();//    ,  promise       Deferred      

まとめ
1、deferredオブジェクトは、非同期または遅延を通常のイベントのようにコールバック関数として登録することができ、非同期または遅延プログラミングのコールバック関数の管理をより明確かつ明確にすることができる.
2、1つのdeferredオブジェクトに複数のコールバック関数を持つことができます.
3、複数のdeferredオブジェクトは、1つ以上のコールバック関数を共有することができる.
4、イベント内の手動トリガイベントのように、deferredオブジェクトの状態を手動で変更することで、すべてのものをdeferredオブジェクトとして扱うことができ、提供される様々な方法を便利に使用することができます.