JQuery 延迟对象和 ajax 调用答案

【问题标题】：JQuery Deferred object and ajax callsJQuery 延迟对象和 ajax 调用
【发布时间】：2012-03-09 11:44:12
【问题描述】：

我试图了解 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 仅在模板加载后才开始加载。我将其修改为使用 Deferred 对象：

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

到目前为止一切顺利。现在我将其统称为“部分”，它们是一些内联的 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 2”...“group n”的回调保证不会在“group 1”回调之前被调用，但它们最终仍会被调用 - 无论是在各自的请求完成之后还是在“group 1”回调之后，具体取决于花费的时间更长。

【问题讨论】：

标签： javascript jquery jquery-deferred

【解决方案1】：

您能否为您的部分设置一个 Deferred 集合和一个主 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);
        });
    });
});

【讨论】：