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

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

  $ .getScript（“test.js”，function（）{
     //加载脚本后运行的代码
 }）; 

我需要的：

  $ .getScript（new Array（“1.js”，“2. js”），function（）{
     //加载所有脚本后运行的代码
 }）; 

谢谢

Answer 1

我建议你研究一下LABjs

这正是它的目的。

Answer 2

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

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

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

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

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

 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

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

Answer 6

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

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

我们可以创建一个传递js文件路径数组的函数，这个函数将为第一个js文件执行$.getScript() ，并且对于success方法，它将通过传递第二个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 。