javascript - 使用 jQuery $.getScript() 方法以给定的顺序加载多个 JS 文件

Question

我首先加载了jQuery并尝试使用以下方法加载一些 js 文件

注意：“ daterangepicker.js ”需要“ moment.js ”

$.when(
    $.getScript("https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"),
    $.getScript("https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.js"),
    $.getScript("1.js"),
    $.getScript("2.js"),
    $.getScript("3.js"),
    $.Deferred(function(deferred) {
        $(deferred.resolve);
    })
).done(function() {
    $('input[name=\'time\']').daterangepicker();
});

但我有一个错误

未捕获的类型错误：时刻不是函数

然后我尝试了第二种方法。

$.when(
    $.getScript("https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js").done(function() {
        $.getScript("https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.js").done(function() {
            alert("scripts loaded");
        });
    }),
    $.getScript("1.js"),
    $.getScript("2.js"),
    $.getScript("3.js"),
    $.Deferred(function(deferred) {
        $(deferred.resolve);
    })
).done(function() {
    alert("All js files are loaded");
    $('input[name=\'time\']').daterangepicker();
});

这次我得到了

daterangepicker 不是函数

因为“所有 js 文件已加载”警报首先出现，“脚本已加载”警报排在第二位。

Answer 1

我已经实现了一个新的逻辑

function getScripts(scripts, callback, i) {
    i = i ? i : 0;
    $.getScript(scripts[i]).done(function() {
        ++i === scripts.length ? callback() : getScripts(scripts, callback, i);
    });
}

getScripts(
    [
        "https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js",
        "https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.js",
        "1.js",
        "2.js",
        "3.js"
    ],
    function() {
        alert("all files are loaded");
        $('input[name=\'time\']').daterangepicker();
    });

它按预期工作。