javascript - JQuery 延迟对象和 ajax 调用

Question

我正在尝试了解 JQuery Deferred 对象。我正在开发一个 JS 框架，它加载一个模板和一些 JSON 对象，并使用它们生成一些 HTML。最初的方法是按顺序加载它们(伪代码):

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

这是次优的，因为 json 仅在模板加载后才开始加载。我修改了它以使用延迟对象:

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

到目前为止一切顺利。现在我有一个称为“partials”的东西，它们是一些内联的 HTML 片段，它们是根据单独的模板和 JSON 数据构建的，这些数据是异步请求的，然后插入到页面中。目前，我在主模板呈现后开始加载它们:

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);
           });
       }); 
    });
});

这又不是最佳选择，因为我可以在主模板之后立即开始同时加载它们。

然而，这样做的问题是，部分模板可以在主模板加载和渲染之前完成加载，因此没有地方可以插入它们。或者他们可以稍后完成。

将它们放入单个 $.when() 调用中并不好，因为我想在主模板和 JSON 数据准备好后立即显示页面，因此以下内容将不起作用:

$.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(...);
});

所以，问题是:

是否可以使用 Deferred 对象来设置一系列 ajax 请求，以便将它们分为几组:

• 所有请求同时发起
• 当“组 1”的请求完成时，将调用回调函数
• 保证不会在“group 1”回调之前调用来自“group 2”...“group n”的回调，但它们最终仍会被调用 - 在相应请求完成之后或在“group 1”回调之后，取决于花费的时间更长。

Answer 1

您能否为部分结果设置一组 Deferreds 和一个主 Deferred，然后仅在主 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);
        });
    });
});