[翻訳] jQueryの繰延

jQueryの$ .Deferred（）コマンドは、最近、最も強力なコマンド関数ライブラリです。これは新しい概念ではなく、フロントエンド開発者の何千ものために非常に価値があります。ビューの中心点から、それは非常に単純な繰延が、それは、非同期管理のための非常に強力なツールです。これはよく、フロントエンドの開発を知られ、多くの場合、非同期処理を必要としています。

このエリアを提供している中で当社は、繰延およびAPIのjQueryに焦点を当てます。ここでは、多くの豊かな例です。読んだ後、あなたは、繰延とするとき、それを使用するかを学びます。

コアな概念を学びます

Ajaxリクエスト、アニメーション、またはWebワーカー：上で本質的に任意の非同期処理にも適用することができるプロキシオブジェクトを延期。ユーザーの行動は、遅延処理の設計に使用することができ、繰延ページ上のフォームには、エラーが発生した場合、またはどのように治療が正常に完了したことを行うようにするときに指定することができます。jQueryのは、あなたが成功したかどうかを判断しますた、チェーン機能を登録することができますまたはエラーが発生し、または通知繰延ときに、特定の状態で呼ばれています。

あなたは繰延使用している可能性があります。jQueryのAjaxのメソッドは、オブジェクトが実際の繰延インタフェースを行っている返します。このオブジェクトは、Ajaxリクエストの成功または失敗を解析します。

あなたが知っておく必要がある1つ重要なことがあります

ビューの繰延抽象的な点は、開発者が非同期処理を避けるためにできるようにすることです。繰延は無限に拡張すること、及びチェーンは繰延オブジェクトのライフサイクルに機能を追加していくことができます。このアプローチの鍵は、繰延チェーン機能は、繰延解析状態が完了した直後に呼び出されるということです。あなたは、非同期演算器を心配する必要はありません（例Ajaxリクエスト）が完了している場合。繰延繰延機能本で実行または実行状態の後に解析されるに結合するチェーン。

繰延jQueryのを使用して

解決と拒否

この方法の繰延コアを使用すると、構文解析に対処または繰延オブジェクトを拒絶する必要があるということです。あなたは$ .Deferred（）メソッドは、新しい繰延オブジェクトを作成し使用することができます。オブジェクト（）メソッドで行わ繰延解決することで実行されるが、遅延オブジェクトが拒否されたときに失敗（）メソッドが実行されます。実際には、解像度又は繰延オブジェクトを拒否）は（（解決の手段によって達成される）と拒否されるであろう。本質的には、アヤックスのjQueryの（）メソッドは、（決意を呼び出して）要求が成功した場合、要求は間違っているだろう：（）メソッドの呼び出し（例のHttp状態404）を拒否します。

あなたが行われたり、繰延オブジェクトに対処するために失敗すると、オブジェクトが解析され、機能が直ちに実行されますマウントすると、覚えておいてください。

お知らせのDeferred：通知（）および進捗状況（）

jQueryの1.7はまた、繰延の進捗状況の概念を追加し、これを拒否し、分析用の進歩があります。進捗状況は、（）あなたが遅延コール通知（）関数の連鎖方式をマウントすることができます。これは、繰延応答は「進歩の現在の状態を解決します。」することができます延期は、遅延ローディング/ローディング完了構文解析のオブジェクトをリソースは、レジスタ機能の鎖に、缶（）関数を呼び出し、および機能は、例えば、プログレスプログレスバーに定期的に更新することができる時間を記載していますときに、現在の進捗状況を通知します。

PROMISを返します（）

多くの場合、あなたは繰延を返却している場合がありますが、このオブジェクトが解消または拒否されていることを確認する必要はありません - あなたは、自律制御したいです。この場合、あなたは約束のオブジェクトを返すことができます。jQueryの面では、読み取り専用型繰延オブジェクトを約束します。あなたがチェーン機能を搭載することを可能にすることを約束し、繰延状況を尋ねたが、あなたはそれが自身の状態（例：パース/拒否）を変更したいことはできません。独自の内部プロセスのAjaxの判断は正しいか間違っているの要求であるため、jQueryのAJAX（）メソッドは、約束を返します。

（）同期非同期イベントによって

$ .Whenは（）繰延の一つ以上を可能にし、すべてのオブジェクトの解像度を延期する場合にのみ解決される新しい繰延オブジェクトを生成します。これは、あなたが複数の非同期のイベントになる組み合わせることができます。

次の例を考えます：

私たちのUI要求二つの別々のAjaxリクエストからのデータ、およびこれら2つの要求をデータ作られた後、それは絵を描く必要があります。

ていないとき（）、私は二つの鎖の要求が完了したことを確認するために、ネストされた関数を注目します。価格であるのはなぜ？我々は2つの異なる場所でエラー処理を指定する必要があります。


var name = $.post('/echo/json/', {json:JSON.stringify({'name': "Matt Baker"})});
var lastUpdate = $.post('/echo/json/', {json:JSON.stringify({'lastUpdate':"Hello World"})});
name.done(function(nameData) { 
   var name = nameData.name;
   lastUpdate.done(function(lastUpdateData) {
      var lastUpdate = lastUpdateData.lastUpdate;
      $("#render-me").html(name + " 's last update was: " + lastUpdate);
   }).fail(function() {
      $("#error").html("an error occured").show();
   }).fail(function() {
       $("#error").html("an error occured").show();
   });
});

当社は、繰延2件のAjaxリクエストが繰延オブジェクトになり返す組み合わせるために$ .when（）を使用することができます。2件のAjaxリクエストが完了したときに、ターゲットにのみ解決されます。我々は成功に提示UI要素を処理するために、チェーン機能を登録することができます。ちなみに質問は、一度私たちは、1つの場所でエラー処理を指定する必要があります。


var name = $.post('/echo/json/', {json:JSON.stringify({'name':"Matt Baker"}) });
var lastUpdate = $.post('/echo/json', {json:JSON.stringify({'lastUpdate':"Hello World"})});

$.when(name, lastUpdate)
  .done(function(nameResponse, lastUpdateResponse) {
      var name = nameResponse[0].name;
      var lastUpdate = lastUpdateResponse[0].lastUpdate;
          $("#render-me").html(name+"'s last update was: "+lastUpdate);
  }).fail(function() { 
       $("#error").html("an error occured").show();
});

//なぜ配列で行わ機能で表示されますか？

//この関数は、受信したデータにおける繰延オブジェクト$ .when（）内の各チェーンのすべての機能を行わ行われ、新たな鎖を受け取ります。

//この例では、我々は、2つの配列をした、メソッド名要求は、チェーン機能に送信される他から行われる要求行う方法の最終更新鎖機能に送信されます。

パイプに変換タイプ（）

jQueryのは、APIの関心の遅延を目的としている：パイプ（）。パイプは、（）の変換（jQueryのコールフィルタ）の繰延結果にあなたを可能にします。あなたが拒否（）またはresolove（）関数を変更する機能を提供することができることはあなたのチェーンの値が渡され、または関数は、繰延オブジェクトの状態を変更することができます。

私たちは例を見てみましょう。以下のシナリオを考えてみましょう。

あなたのJSONのAPI JSON（例：{エラー：真}）説明されたエラーに応答して、フラグを使用する代わりに、エラーの伝達HTTPステータスコードによって示されています。あなたのJSON APIは、常にHTTPステータスコード200を返します。

この場合、HTTPエラーで偽の状態は200の下で発生しています。故障HTTP要求は拒否される場合にのみ、約束によるもの。この方法では、成功関数のチェーンで独自のエラー処理を扱うのではなく、チェーン機能で失敗することがあります。


$.post('/echo/json/',{json: JSON.stringify({'error':true}) })
   .done(function(response) {
      if(response.error) {
          $("#status").html("An error occurred");
      }else {
         $("#status").html("Success!");
      }
}).fail(function(response) {
    $("#status").html("A server error occured(failing http status code)");
});

明らかに、これは理想的なソリューションではありません。強力なパイプ（）を用いて、我々は、Ajaxリクエストの分解能をインターセプタできる新しい繰延オブジェクトを作成することができます。私たちは、JSON応答エラーフラグをチェックします。trueの場合、パイプは、それが連鎖機能が実行されていることを確認するために失敗し、繰延オブジェクトが拒否された返されます。


var myXhrDeferred = 
   $.post('/echo/json', {json:JSON.stringify({'error':true})})
      .pipe(function(response) {
         if(response.error){
            return $.Deferred().reject(response);
         }
         return response;
      },
      function() {
         return $.Deferred().reject({error:true});
      }
   );

myXhrDeferred .done(function(response) {
   $("#status").html("Success!");
}).fail(function(response) {
   $("#status").html("An error occurred");
});

ユニバーサル非同期

実際には、Webサイトやアプリケーションの多くの非同期があります。次のシナリオを検討してください。

あなたのサイトは、会員データを作成することが必要です。データを記入することを奨励するためには、スケジュールデータの整合性を表示することができます。彼らは記入するときは、「ありがとう」のメッセージを表示したいです。

この場合には、繰延は、遅延部材データの範囲を記述する。基本的に作成したり、データ・コンピューティングに記入し、実際に人間の行動を計算することです。この段階では、あなたはおそらく誘導については考えていませんが、繰延によって検証することができます。私たちは、完成されたユーザーの行動繰延オブジェクトに通知を送る（したがって、プロキシになる繰延）する通知（）を使用し、（解決）に通知することができますすることができます。我々は（）チェーン機能に登録進捗状況についてのスケジュールを更新して、行って（）表示する「ありがとう」のメッセージを使用することができます。


var userProgress = $.Deferred();
var $profileFileds = $("input");
var totalFields = $profileFields.length;
userProgress.progress(function(filledFields) {
var pctComplete = (filledFields/totalFields)*100;
     $("#progress").html(pctComplete.toFixed(0));
});

userProgress.done(function() {
     $("#thanks").html("Thanks for completing your profile!").show();
});

$("input").on("change", function() {
   var filledFields = $profileFields.filter("[value!='']").length;
   userProgress.notify(filledFields);
   if(filledFields == totalFields) {
      userProgress.resolve();
   }
});

どこにでも繰延

各開発者が直面しなければならなかった非同期処理を扱うために、遅延モードは、シンプルパワフル、かつ広く使用されます。

繰延キャッシュ1.使用

【0002】以上の力のsetTimeout（）

3. jQueryの繰延APIプラスの例

4. jQueryの繰延オブジェクトのAPIリファレンス

オリジナルリンクします。http：//eng.wealthfront.com/2012/12/jquerydeferred-is-most-important-client.html

オリジナル：大列 [翻訳] jQueryの繰延

[翻訳] jQueryの繰延

おすすめ