javascript - 同步视图/数据加载

Question

我将执行 2 个 AJAX 调用：

1. 加载 HTML 部分模板。
2. 加载模板的 JSON 数据并将其渲染到加载的模板中。

JSON 应该与模板分开加载，因为用户可以触发某种“刷新”操作。无法在第一个页面加载时加载模板，因为页面上有选项卡控件，并且每个选项卡都应“按需”加载。

所以让我们说一些function loadData被称为。所以我需要做以下事情：

1. 如果模板已加载，则转到步骤 3。
2. 同时发送 AJAX 用于模板使用$().load和 AJAX 用于 JSON 数据。事实上，我们可以将它们一起发送而无需等待模板加载，对吗？$.getJSON
3. 如果 JSON 已加载，则检查模板是否已在此处。如果是这样，则将数据渲染到模板中。否则等待模板加载，然后在成功时渲染数据。

所以我想知道这种活动的最佳做法是什么？有没有完整的解决方案？

先感谢您。

Answer 1

是的。您可以使用 jQuery Deferreds (http://api.jquery.com/category/deferred-object/) 来协调这一切。

JS代码：

var templatePromise = null;

function loadData() {
    if (!templatePromise) {
        templatePromise = $.get('templateUrl');
    }

    var dataPromise = $.getJSON('dataUrl');

    $.when(templatePromise, dataPromise)
        .done(function (template, data) {

            // you have both template and data. 

        })
        .fail(function () {
            // either the template or the data failed to be fetched properly.
        });
}