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

【问题标题】：Load multiple JS files with the given order using jQuery $.getScript() method使用 jQuery $.getScript() 方法以给定的顺序加载多个 JS 文件
【发布时间】：2020-02-13 09:28:23
【问题描述】：

我已经先加载了 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 文件都已加载” 警报最先出现，“脚本已加载” 警报随后出现。

【问题讨论】：

标签： javascript jquery ajax momentjs daterangepicker

【解决方案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();
    });

它按预期工作。

【讨论】：