JQuery Deferredオブジェクトとajaxコール

Question

私はJQuery Deferredオブジェクトの周りに頭を抱えようとしています。私はテンプレートといくつかのJSONオブジェクトをロードし、それらを使っていくつかのHTMLを生成するJSフレームワークに取り組んでいます。 JSONのみテンプレートがロードされた後にロードを開始するので、準最適である

load_template(template_url, function (template_data) { 
    load_json(json_url, function (json_data) { 
     render(template_data, json_data); 
    }); 
}); 

：最初のアプローチは、（擬似）順番にロードしました。私はこれをDeferredオブジェクトを使用するように変更しました：

これまでのところとても良いです。今私は別々のテンプレートと非同期に要求され、ページに挿入されたJSONデータから構築されたHTMLのいくつかのインライン部分である "partials"を併せて呼び出しました。現在、私はメインのテンプレートがレンダリングされた後、それらのロードを開始：私は右のメインテンプレートの後にそれらを同時にロードを開始する可能性があるため、再び、次善である

load_template(template_url, function (template_data) { 
    load_json(json_url, function (json_data) { 
     render(template_data, json_data); 
     $.each(partials, function (idx, partial_url) { 
      load_partial(partial_url, function (partial_data) { 
       $("#some-element-id").html(partial_data); 
      }); 
     }); 
    }); 
}); 

を。

しかし、この問題は、メインテンプレートがロードされてレンダリングされる前にパーシャルが読み込みを完了できるため、挿入する場所がないことにあります。または、後で終了することもできます。私は、すぐにメインテンプレートとJSONデータの準備ができているので、次は動作しないように、ページを表示したいと思いますので、単一の$ .when（）の呼び出しにそれらを貼り付ける

は良くありません。

$.when(load_template, load_json, load_partial_template, load_partial_json, ...).done(function (template_xhr, json_xhr, ...) { 
    render(template_xhr[0], json_xhr[0]); 
    insert_partial(...); 
}); 

だから、質問は次のとおりです。すべての要求が同じトンで開始されている

• ：

  は、彼らはいくつかのグループに分かれていますので、AJAX要求のシリーズを設定するには、繰延オブジェクトを使用して、それは可能ですime

• "グループ1"からの要求が完了したときにコールバック関数が呼び出されたとき
• "グループ2" ... "グループn"からのコールバックは "グループ1"コールバックの前に呼び出されないことが保証されていますが、それぞれの要求が完了した後、または「グループ1」のコールバックの後に、やがて何が長くかかるかに応じて、最終的に呼び出されます。

Answer 1

メインのDeferredが終了した後に、部分的なDeferredsと1つのメインDeferredのコレクションを設定し、部分的な結果で何かを行うことはできますか？

var dfdPartials = []; 
$.each(partials, function (idx, partial_url) { 
    dfdPartials.push($.when(createDeferredForPartial(partial_url)); 
}); 

var dfdTemplate = $.when(load_template, load_json).done(function (template_xhr, json_xhr) { 
    render(template_xhr[0], json_xhr[0]); 
    $.each(dfdPartials, function (idx, dfd) { 
     dfd.done(function (partial_data) { 
      $("#some-element-id").html(partial_data); 
     }); 
    }); 
});