ループ内のJQueryで同期化されたAjaxリクエスト

Question

次のような状況があります。ループ内で同期化されたAjaxリクエストを作成し、各繰り返しの後にdiv要素に返す必要があります。下）。各要求の応答時間は異なる場合がありますが、表示する順序は発行された順序と同じでなければなりません。ここでは3つのリクエストを持つ例を示します。リクエスト "A"は3秒、 "B"は1秒、 "C"は5秒が必要です。結果を表示する順序は、要求が発行されたときA、B、Cですが、使用するコードはB、A、Cの結果を示します。

ここにコード（JQuery Ajaxリクエスト）があります：

$(document).ready(function(){ 
    var json = document.getElementById("hCategories").value; 
    var categories = eval('(' + json + ')'); 

    for(curCat in categories) { 
    curCatKey = categories[curCat]['grKey']; 

    $.ajax({ 
     type: "POST", 
     url: "get_results.php", 
     data: "category=" + escape(curCatKey) + 
      "&search=" + escape($("#hQuery").val()), 
     timeout: 8000, 
     async: false, 

     success: function(data) { 
     $("#content").append(data); 
     } 
    }); 
}); 

"async：false"で動作すると思っていましたが、すべてのAjax呼び出しが終了してループの後に結果が表示されるまで待機します。私は皆さんの中には、いくつかの異なる解決法を指摘できることを願っています。事前に

おかげで、 乾杯クリス

EDIT：すべての可能な解決策のおかげで、私は今、一つずつこれらを試してみて、私の問題に合うものに戻ってくるだろう。

Answer 1

これは私がこの問題のための2つのソリューション提案持つトリック

var results = []; 
var idx = 0; 

for(curCat in categories) { 
    curCatKey = categories[curCat]['grKey']; 

    (function(i) { 
     $.ajax({ 
      type: "POST", 
      url: "get_results.php", 
      data: "category=" + escape(curCatKey) + 
       "&search=" + escape($("#hQuery").val()), 
      timeout: 8000, 
      async: false, 
      success: function(data) { 
      results[i] = data; 
      if (i == idx - 1) { // last one 
       for (var j=0; j < results.length; j++) { 
        $("#content").append(results[j]); 
       } 
      } 
      } 
     }); 
    })(idx++); 

Answer 2

をするでしょう：

移入生成されたdivを

あなたがループ内のIDを持つdivを生成し、それらを取り込むことができ

要求が完了したとき：

$(document).ready(function() { 
    var json = document.getElementById("hCategories").value; 
    var categories = eval('(' + json + ')'); 

    for (curCat in categories) { 
     (function(curCat) { 
      var curCatKey = categories[curCat]['grKey']; 
      $('#content').append('<div id="category-"' + escape(curCat) + '/>'); 

      $.ajax({ 
       type: "POST", 
       url: "get_results.php", 
       data: "category=" + escape(curCatKey) + "&search=" + escape($("#hQuery").val()), 

       success: function(data) { 
        $("#category-" + escape(curCat)).html(data); 
       } 
      }); 
     })(curCat); 
    } 
}); 

か、配列内のjqXHRオブジェクトを格納し、すべてのコールが終了したため、に成功関数を呼び出すためにdeferredを使用することができます

繰延を使用しています。

$(document).ready(function() { 
    var json = document.getElementById("hCategories").value; 
    var categories = eval('(' + json + ')'); 
    var requests; 

    for (curCat in categories) { 
     var curCatKey = categories[curCat]['grKey']; 

     requests.push($.ajax({ 
      type: "POST", 
      url: "get_results.php", 
      data: "category=" + escape(curCatKey) + "&search=" + escape($("#hQuery").val()) 
     })); 
    } 

    $.when.apply(requests).done(function() { 
     for (i in requests) { 
      requests[i].success(function(data) { 
       $("#content").append(data); 
      }); 
     } 
    }); 
}); 

最初の方法は、コンテナに連続してデータを投入するという利点があります。私はこれらの機能のいずれかをテストしていませんが、ロジックは私がそれを記述した方法で動作するはずです。

Answer 3

私はこれがあなたが探しているものだと思います。いくつかの微調整が必​​要かもしれませんが、私はDeferredで少し錆びています。あなたは強力な力でそれを読む

deferred = $.Deferred() 
for(curCat in categories) { 
    deferred.pipe(
    function(resp){ 
     postData = {} // set up your data... 
     return $.post("get_results.php", {data: postData, timeout: 8000}) 
       .done(function(content){ $("#content").append(content) }) 
    }) 
) 
} 

// Trigger the whole chain of requests 
deferred.resolve()