如何使用 jQuery $.getScript（） 方法包含多个 js 文件

答案是

您可以将 promise 与 一起使用，并等待直到所有脚本都加载完毕，如下所示：getScript()

$.when(
    $.getScript( "/mypath/myscript1.js" ),
    $.getScript( "/mypath/myscript2.js" ),
    $.getScript( "/mypath/myscript3.js" ),
    $.Deferred(function( deferred ){
        $( deferred.resolve );
    })
).done(function(){
    
    //place your code here, the scripts are all loaded
    
});

小提琴

另一个小提琴

在上面的代码中，添加一个延迟并在其中解析它就像将任何其他函数放在jQuery调用中一样，就像，它类似于$()$(func)

$(function() { func(); });

也就是说，它等待DOM准备就绪，因此在上面的示例中，由于在DOM就绪回调中解析的调用，等待所有脚本被加载并等待DOM准备就绪。$.when$.Deferred

对于更通用的用途，一个方便的功能

可以像这样创建接受任何脚本数组的实用程序函数：

$.getMultiScripts = function(arr, path) {
    var _arr = $.map(arr, function(scr) {
        return $.getScript( (path||"") + scr );
    });
        
    _arr.push($.Deferred(function( deferred ){
        $( deferred.resolve );
    }));
        
    return $.when.apply($, _arr);
}

可以这样使用

var script_arr = [
    'myscript1.js', 
    'myscript2.js', 
    'myscript3.js'
];

$.getMultiScripts(script_arr, '/mypath/').done(function() {
    // all scripts loaded
});

其中，路径将附加到所有脚本的前面，并且也是可选的，这意味着如果数组包含完整的URL，也可以执行此操作，并将路径一起省略

$.getMultiScripts(script_arr).done(function() { ...

参数、错误等

顺便说一句，请注意，回调将包含许多与脚本中传递的参数匹配的参数，每个参数表示包含响应的数组。done

$.getMultiScripts(script_arr).done(function(response1, response2, response3) { ...

其中，每个数组将包含类似 的内容。我们通常不需要访问这些参数，因为脚本无论如何都会自动加载，并且大多数时候回调是我们真正想要知道所有脚本都已加载的原因，我只是为了完整性而添加它，并且对于需要访问加载文件中的实际文本的极少数情况， 或者当需要访问每个XHR对象或类似的东西时。[content_of_file_loaded, status, xhr_object]done

此外，如果任何脚本无法加载，将调用失败处理程序，并且不会加载后续脚本

$.getMultiScripts(script_arr).done(function() {
     // all done
}).fail(function(error) {
     // one or more scripts failed to load
}).always(function() {
     // always called, both on success and error
});

我实现了一个简单的函数来并行加载多个脚本：

功能

function getScripts(scripts, callback) {
    var progress = 0;
    scripts.forEach(function(script) { 
        $.getScript(script, function () {
            if (++progress == scripts.length) callback();
        }); 
    });
}

用法

getScripts(["script1.js", "script2.js"], function () {
    // do something...
});