複数のAJAXが順番に成功

Question

AJAXを使用してデータブロックのコレクションをロードしています。これらのブロックはそれぞれDOM内で順にレンダリングする必要があるため、最初のブロックを要求してレンダリングしてから、最後のブロックまで次のように要求します。

function loadBlock(block, limit) { 
    var deferred = $.Deferred(); 
    (function request(block, limit) { 
    $.ajax({ 
     url: 'block/' + block, 
     success: function(html) { 
     $('#block-' + block).html(html); 
     var nextBlock = block + 1; 
     if (nextBlock <= limit) 
      request(nextBlock, limit); 
     else 
      deferred.resolve(); 
     } 
    }); 
    })(block, limit); 

    return deferred.promise(); 
} 

しかし、以前の要求のために、この全体の待ち時間がたくさんプロセスを遅くすることができます完了するために：最後の1が行われた場合、繰延オブジェクトは、すべてのブロックがロードされた別の関数を通知するために解決されます。

だから私は何をしようとしているのは、一度にすべてのリクエストを起動して、できるだけ多くのサーバーを取得させることですが、対応するリクエストが完了した後に各ブロックをロードするのではなく、前のものがロードされるまで繰り返す。

例：10個のリクエストが送信されます。 1、2、3、...順番にブロックをレンダリングしたいとしましょう。最初の3つのブロックのリクエストが順番に完了しているので、ブロックがページにロードされているとしますが、ブロック5ブロック4の前に準備が整っていれば、ブロック5をどこかに保ち、ブロック4がそこにあるとき、つまりブロック4の要求が完了してレンダリングされた後にのみページに表示したいと思うでしょう。

私の質問は、以下のとおりです。

• はどのようにして並列に実行することができますページ内のブロックを読み込み要求と他の機能を発射するいくつかの機能？
• 前のブロックがロードされた特定のブロックをロードする機能を通知することができます。

また、遅延ロジックを維持する必要があります。なぜなら、プロセス全体が完了した時点でも信号を送信する必要があるからです。

Answer 1

そうすることの最もエレガントな方法は、より多くの初歩的な方法が完了した要求または各AJAXの後にチェックされているBooleansの配列を格納するためにintをマークするだろうPromise.all()

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all

を使用することですリクエストが完了しました。

Answer 2

次のようにあなたがそれを行うことができます。

var loadBlockOneDef = loadBlock(block, limit); 
var loadBlockTwoDef = loadBlock(block, limit); 
... 
Promise.all([loadBlockOneDef, loadBlockTwoDef, ..]) 
    .then(function (values){ 
     //DO STUFF 
    } 

をPromise.allためのパラメータは、（）約束/ Deferredの作り方の配列です。 値は配列内の各約束の配列で、loadBlockOneDefのvalues [0] - > resolve-value ...

Answer 3

これはajax-requestの即時実行を保証しますが、 が解決する前に、前回のDeferredが解決されるのを待っています。（現行のajax-callが前のajax-callよりも前に完了していても）を解決します。

var loadBlock = (function(previous){ 
    //the purpose of `removePreviousResponse` is to clean up 
    //the arguments returned by the Deferred 
    //and to stay consistent with the behaviour of $.ajax() 
    function cleanupArguments(previousArgs, currentArgs){ 
     //here `$.when()` is resolved with two arguments, 
     //the args for the previous and for the current ajax call 
     //we want only the args for the current ajax-call to be further propagated 

     //since we can not return multiple values, we wrap them into a Deferred 
     //that is resolved with multiple arguments 
     var deferred = $.Deferred(); 
     deferred.resolve.apply(deferred, currentArgs); 
     return deferred.promise(); 
    } 

    return function(block){ 
     //resolves when _both_ promises are done, 
     //the previous one and the current 
     var current = $.when(previous, $.get('block/' + block)) 
      .then(cleanupArguments) 
      .done(function(html, success, evt){ 
       //add html to the DOM 
       $('#block-' + block).html(html); 
      }); 

     previous = current; 
     return current; 
    } 
})(null); 

//the blocks are added in that order that you call `loadBlock()` 
loadBlock(0); 
loadBlock(1); 
loadBlock(3).then(function(html, success, evt){ 
    //you can even append further logic 
    console.log("block 3 has been loaded"); 
}); 
loadBlock(2);