jQueryを使った非同期Ajaxリクエストの並列処理

質問

複数のajax/jsonリクエストの結果に基づいて、ページを更新したいと思います。jQueryを使用すると、次の非常に単純な例のように、コールバックを連鎖させることができます。

$.getJSON("/values/1", function(data) {
  // data = {value: 1}
  var value_1 = data.value;

  $.getJSON("/values/2", function(data) {
    // data = {value: 42}
    var value_2 = data.value;

    var sum = value_1 + value_2;

    $('#mynode').html(sum);
  });

});

しかし、これではリクエストが連続的に行われてしまいます。むしろ、リクエストを並行して行い、すべてが完了した後にページの更新を実行する方法を希望します。これを実行する方法はありますか？

どのように解決するのですか？

任意の数の並列クエリをサポートできる、この解決策を試してみてください。

var done = 4; // number of total requests
var sum = 0;

/* Normal loops don't create a new scope */
$([1,2,3,4,5]).each(function() {
  var number = this;
  $.getJSON("/values/" + number, function(data) {
    sum += data.value;
    done -= 1;
    if(done == 0) $("#mynode").html(sum);
  });
});