Question

我正在使用 $。延期来加载多个文件：

$.when(
        $.getScript("/assets/libs/swal/sweet-alert.min.js"), 
        $.getScript("/assets/js/jquery.form.js"), 
        $.getScript("/assets/js/jquery.preloader.js"), 
        $.getScript("/assets/js/item_inventory.js"), 
        $.Deferred( function(defer) {
            $(defer.resolve);
        }).promise()
    ).done(function() {

    });

但是当我在控制台中看到文件没有像

那样以串行方式加载

甜alert.min.js
jquery.form.js
jquery.preloader.js
item_inventory.js

然后问题是最后一个item_inventory.js有一些与jquery.preloader.js相关的依赖关系，所以它有时会产生错误，有没有什么方法我可以在没有任何第三方库的情况下加载它？

Answer 1

$.getScript返回Deferred对象，您可以使用该对象构建串行链。像这样：

$.getScript("/assets/libs/swal/sweet-alert.min.js").done(function () {
    $.getScript("/assets/js/jquery.form.js").done(function () {
        $.getScript("/assets/js/jquery.preloader.js").done(function () {
            $.getScript("/assets/js/item_inventory.js");
        });
    });
});

Answer 2

您可以使用$.getScript()的回调函数来实现此目的。

$.getScript( "/assets/js/jquery.preloader.js", function() {
  $.getScript("/assets/js/item_inventory.js")
});

这样，只有在加载item_inventory.js后才会加载jquery.preloader.js。

<小时/> 资料来源：jQuery.getScript() Documentation by jQuery

Answer 3

另一个建议是以这种方式使用jQuery.Deferred()：

var d1 = new $.Deferred();
var d2 = new $.Deferred();
var d3 = new $.Deferred();
var d4 = new $.Deferred();

$.when( d1, d2, d3, d4 ).done(function () {
    console.log('Loaded in order.');
});

d1.resolve($.getScript("/assets/libs/swal/sweet-alert.min.js"));
d2.resolve($.getScript("/assets/js/jquery.form.js"));
d3.resolve($.getScript("/assets/js/jquery.preloader.js"));
d4.resolve($.getScript("/assets/js/item_inventory.js"));

Answer 4

您可以使用jQuery .then()加载脚本，如下所示：

$.when(
    $.getScript("/assets/libs/swal/sweet-alert.min.js"), 
    $.getScript("/assets/js/jquery.form.js"), 
    $.getScript("/assets/js/jquery.preloader.js")
).then(function() {
    return $.getScript("/assets/js/item_inventory.js")
}).done(function() {
    console.log("done")
});

请注意，因为$.then()会返回它自己的承诺，所以它可以链接，并且您可以嵌套尽可能多的依赖项。

Answer 5

您所做的与串行流完全相反。您一起调用所有$.getScript个来电，并将Deferred个对象传递给$.when。这意味着所有四个都在后台同时运行，彼此独立。

如果您想使用$.when类似承诺的API同步其加载，您应该执行以下操作：

$.when(
    $.getScript("/assets/libs/swal/sweet-alert.min.js"), 
    $.getScript("/assets/js/jquery.form.js"), 
    $.getScript("/assets/js/jquery.preloader.js")
).done(function() {
    $.getScript("/assets/js/item_inventory.js"), 
}).done(function() {
    // do whatever
});

此代码同时加载sweet-alert.min.js，jquery.form.js和jquery.preloader.js ，等待所有完成加载，只有加载item_inventory.js

连续加载多个Javascript文件

5 个答案: