javascript - 仅当使用 jQuery 加载我的所有 JavaScript 时执行某些操作的最佳方式是什么？

Question

我正在使用 jQuery 开发一个网页，我希望它仅在我的所有 JavaScript 文件完全加载后才执行一些代码。我的 HTML 的 head 部分具有以下脚本。

<script src="supervisor/lib/jquery-1.6.min.js" type="text/javascript"></script>

在 jQuery 文件中，我插入了以下代码:

$.getScript('functions.js', function () {
  // code here
});

文件 functions.js 具有以下代码:

$.getScript('mask.js');
$.getScript('validations.js');
$.getScript('lotsofscripts.js');
// and more...

我希望第一个 $.getScript() 中的这里的代码仅在加载所有其他 JS 后执行，但这并没有发生。实现这一目标的最佳方法是什么？

PS:我使用了很多 $.getScript() 因为我发现它们更容易分开，但我希望将它们插入到同一个文件中。

Answer 1

你总是可以增加一个计数器。这样您的 getScript 调用将保持异步，因为您最后要做的就是改变它。坦率地说，您找到的任何并行加载脚本然后执行某些功能的打包解决方案可能只是一个更 Shiny 的版本:

var counter = 0;
var filesToLoad = ["mask.js", "validations.js", "lotsofscripts.js"];
var filesCount = filesToLoad.length;

// Increment counter each time a getScript completes
function incrementCounter() {
  if (++counter === filesCount) {
    // This code will execute after everything loads
  }
}

// Iterate through the files and run getScript on them,
// with incrementCounter as the callback
for (var i = 0; i < filesCount; i++) {
  $.getScript(filesToLoad[i], incrementCounter);
}

这是一个 jsFiddle example .