jquery - 使用带有 Promise 的 jQuery 加载

Question

我仍在努力思考deferred以及什么不是，所以考虑到这一点，我有一个关于如何执行以下操作的问题。

我和我的团队有 3 个独立的 .load() 方法，每个方法都会获取一个特定的模板并将其附加到同一个容器中。正如您可能想象的那样，每次加载所需的时间量都不同，因此加载内容时，它会以“阶梯”方式加载(1，然后 2，然后 3)。我想利用deferred objects并等到它们全部完成，然后同时附加它们以删除“楼梯台阶”操作。

$('<div>').load(baseInfoTemplate, function () {
    var baseData = {
        // build some object
    };

    $.tmpl(this, baseData).appendTo($generalContainer);
});

所有三个调用都与上面的调用类似。

我怎样才能实现这个目标？

Answer 1

我在这种情况下使用下一个代码:

$.when(
    $.get('templates/navbar.tmpl.html', function(data) {
        $('#navbar').html(data);
    }),
    $.get('templates/footer.tmpl.html', function(data) {
        $('#footer').html(data);
    }),
    $.Deferred(function(deferred) {
        $(deferred.resolve);
    })
).done(function() {
    $.getScript("js/tools/jquery.min.js");
});

在我看来，它看起来比以前的实现更加结构化并且非常漂亮。