javascript非同期処理とJquery deferred対象用法のまとめ

本論文の実例は、javascript非同期処理とJquery deferredオブジェクト使用法を述べている。皆さんに参考にしてあげます。具体的には以下の通りです。
これはプロジェクトチームのボスがまとめたjqueryの非同期処理要求とjquery deferredオブジェクトを使ういくつかの一般的な方法です。プロジェクトでまとめたものですが。でも比較的に通用します。ここでシェアします。

のAjax動作はすべて非同期処理を採用している。

は、非同期呼出を処理するためにJqueryのDefferedオブジェクトを採用する。

は非同期呼出であるため、$.Ajax関数の戻り値は戻りの結果を表すものではなく、Defferedオブジェクトだけである。

Ajax呼び出しが完了した後に実行される論理は、パラメータとしてDefferedオブジェクトに伝達されるdone()、fail()、always()の関数として機能して実行されてもよい。

の関数にAjax呼び出しが含まれている場合、この関数はAjaxから返される非同期オブジェクトを自分の戻り値としなければならない。そうでないと、関数の使用者は後続コードの正常な実行順序を保証できない。

たとえば:

function readData(){
  $.ajax({ url:"test", dataType:"json" })
  .done(function() {
    //....
  });
}
readData();
//...           ，     Ajax     ，          
     ：
function readData(){
  return $.ajax({ url:"test", dataType:"json" })
  .done(function() {
    //....
  });
}
readData().done(function () {
  //...                
});

、複数のAjax要求を呼び出す必要がある場合、Ajax要求は同時に実行できるかどうかに注意してください。when()関数を使用して同時に実行してもいいなら、プログラムの実行効率と可読性を向上させるために。

deferredオブジェクトは、他のコードがdeferredオブジェクトの状態を変更することを阻止する方法promise()とreslove()を呼び出す他のコードがあります。

var dtd = $.Deferred(); //     Deferred  
var wait = function(dtd){
  var tasks = function(){
    alert("    ！");
    dtd.resolve(); //   Deferred       
  };
  setTimeout(tasks,5000);
  return dtd;
};
wait(dtd)
.done(function(){ alert("   ！"); })
.fail(function(){ alert("   ！"); });
dtd.resolve();  //     dtd     ，      “   ！”   

正しい例：

var dtd = $.Deferred(); //     Deferred  
var wait = function(dtd){
  var tasks = function(){
    alert("    ！");
    dtd.resolve(); //   Deferred       
  };
  setTimeout(tasks,5000);
  return dtd.promise(); //   promise  
};
wait(dtd)
.done(function(){ alert("   ！"); })
.fail(function(){ alert("   ！"); });
dtd.resolve();  //    dtd       

いくつかの場合の処理：

1.ネスト非同期動作の処理。
関数の内部に非同期タスクが実行され、非同期タスクのdoneコールに別の非同期タスクがネストされる場合、最初の非同期タスクの戻り値を簡単に返すことはできません。また、Deferredオブジェクトを返す値として独自に定義する必要があります。

function loadComponent(id){
  var dtd = $.Deferred();
  //loadScript       js  ，        Deffered  
  return loadScript(id)
  .done(function() {
    //js   ，  component load  ，       Ajax         ，     html
    app.getComponent(id).trigger("load")
    .done( function(){
      dtd.reslove(agruments);
    }).fail( function(){
      dtd.reject(agruments);
    });
  });
  //      dtd  ，        done   load       
  return dtd;
}

2.同期および非同期rejectの処理を同時に含む関数。

/*             ，       done ，  component      */
function requireComponent(id){
  if (this.components[id]){
    //  component     ，      reslove     ，        else    ，        
    var dtd = $.Deferred();
    dtd.reslove(this.getComponent(id));
    return dtd;
  }
  else{
    //  component    ，loadScript     JavaScript   ，       component  this.components
    return loadScript(id);
  }
}

Jquery非同期モデルには、caseのような動作の処理能力が不足しているという欠点があります。複数の非同期呼び出しが順番に発生する場合、done内に入れ子処理を行い、コードの読み取り可能性に影響を与えます。

aSyncTask1.done( function () {
  //...           
  asyncTask2.done( function () {
    //...           
    asyncTask3.done( function () {
      //...           
    });
  })
})

jQuery関連の内容について興味がある読者は、当駅のテーマを調べてもいいです。「jQuery form操作テクニックのまとめ」、「jQueryファイルとディレクトリの操作テクニックのまとめ」、「jqueryにおけるAjax用法のまとめ」、「jQuery拡張テクニックのまとめ」、「jqueryセレクタの使い方のまとめ」および「jQuery常用プラグインと使い方のまとめ」
ここで述べたように、皆さんのjQueryプログラムの設計に役に立ちます。