在运行javascript代码之前，如何使用jQuery.getScript（）加载可变数量的脚本？

Question

我需要在运行依赖于它们的javascript代码之前加载可变数量的javascript源文件。 有时需要加载1个脚本，有时需要加载2. getScript（）方法允许加载一个脚本 - 如何在运行内部代码之前使用它来加载x个脚本？

$.getScript("test.js", function(){
    // code to run after script is loaded
});

我需要的：

$.getScript(new Array("1.js","2.js"), function(){
    // code to run after all scripts are loaded
});

谢谢

Answer 1

如果您使用的是jquery 1.5，则可以使用新的延迟语法。

$.when(
    $.getScript("1.js"), 
    $.getScript("2.js"), 
    $.getScript("3.js")
).then(function(){
    alert("all loaded");
});

只需传入您要加载的脚本即可。

Answer 2

我建议你研究一下LABjs

这正是它的目的。

Answer 3

我非常广泛地使用RequireJS ，它非常好。 但是，这可能对您有用：

$.getScript("1.js", function(){
    $.getScript("2.js", function () {
        // code to run after all scripts are loaded
    });
});

这是一个非常讨厌和很少的代码块，IMO，但如果它实际上只有两个这样的脚本，它可能是值得的。 上面的逻辑也可以被提取到一个通用函数，但是一旦你走得太远，使用RequireJS或者像JAAulde建议的LABjs可能更聪明。

Answer 4

一种方法是列出阵列中的所有脚本，跟踪已加载的脚本数量与要加载的数量。 像这样的东西：

var toLoad = ["1.js", "2.js", "3.js"], loaded = 0;

var onLoaded = function() {
    loaded++;
    if (loaded == toLoad.length) {
        console.log('All scripts loaded!');
    } else {
        console.log('Not all scripts are loaded, waiting...');
    }
}

for (var i = 0, len = toLoad.length; i < len; i++) {
    $.getScript(toLoad[i], onLoaded);
}    

Answer 5

一个接一个地加载$ .getScript（）加载多个脚本，并在加载所有脚本后执行操作

工作小提琴 。 检查控制台窗口以获取输出

我们可以创建一个传递js文件路径数组的函数，这个函数将为第一个js文件执行$.getScript() ，在成功方法上，它将通过传递第二个js文件索引来调用相同的函数，这个成功将通过传递第三个文件索引来调用相同的函数，依此类推，直到它加载最后一个文件。 所以它基本上是一个递归函数，当数组中的所有文件都被加载时会给出回调。结束代码就像一样简单

LoadAllScripts("yourArray",function(){
  alert("all scripts loaded!!");
 });

所以完整的代码就是这样的。

 var LoadAllScripts = function (scriptArray, callback) {   
   SyncLoadScript({ scriptArray: scriptArray, index: 0}, function () {
        callback();
    });
};

而SyncLoadScript（ core of the logic ）看起来像

 var SyncLoadScript = function (scriptConfig, callback) {
    var $this = this;
    var script = scriptConfig.scriptArray[scriptConfig.index];
    if (scriptConfig.scriptArray.length > scriptConfig.index) {
        if (script.trim().length > 0) {
            $.getScript(script, function () {
                console.log(script);
                SyncLoadScript({ scriptArray: scriptConfig.scriptArray, index: ++scriptConfig.index, element: scriptConfig.element }, callback);
            }).fail(function (jqXHR, textStatus, errorThrown) {
                console.log(script + " failed while loading");
                debugger;
                console.log("Error: "+errorThrown);
                SyncLoadScript({ scriptArray: scriptConfig.scriptArray, index: ++scriptConfig.index, element: scriptConfig.element }, callback);
            });         
        }
        else {
            console.log("invalid script src!!");           
        }
    }
    else {
        callback();
    }
}

然后，您可以通过传递js文件路径数组来对LoadAllScripts进行简单调用。 如下。

LoadAllScripts(["1.js","2.js","3.js","4.js"], function () {
    console.log("All the scripts have been loaded.");
    //do your stuff after all the scripts are loaded.
});

注意：我已经为你们提供了空的回调来进行调整并传递任何选择的数据。 probably to hold all the failed scripts that you can passback to the main function and try to reload them again 。

Answer 6

今晚早些时候写了这个，但我保证我不是一个植物。 ;-)除了LabJS和RequireJS之外，还有Head.js，它使用简单，完全符合您的要求。