加载按需 JavaScript 文件时如何防止竞争条件？答案

【问题标题】：How to prevent a race condition when loading on-demand JavaScript files?加载按需 JavaScript 文件时如何防止竞争条件？
【发布时间】：2013-03-13 19:23:47
【问题描述】：

为了加快速度，我的 Web 应用程序使用 jQuery 的 ajax 调用按需为某些功能加载 JavaScript 文件。不过，我遇到了竞争条件问题。例如，文件 B.js 依赖于文件 A.js。我已经配置了一个类似 list=[A.js,B.js] 的列表，我遍历这个列表并异步获取脚本。如何防止这种竞争状况？

加载 JavaScript 文件的代码类似于：

loadJS: function(url) {
    $.ajax({url: url, dataType: 'script', success: function(){}});
}

【问题讨论】：

将这两个文件缩小并连接到 C.js 中。如果您只提取一个文件，则没有竞争条件。
不要使用 ajax 来加载那些依赖于其他的脚本？
为什么不使用requirejs？
在向 b.js 发送请求之前，只需等待 a.js 返回即可。
我想避免缩小，因为它在开发过程中很烦人。 RequireJS 没有按需加载的功能，它在开始时加载。

标签： javascript

【解决方案1】：

这种依赖管理并不难。无需过多了解如何正确抽象它，如果您有要加载的文件数组，则在您的 ajax 回调（我假设将 js 文件的内容下载到字符串）中将字符串保存在另一个数组中，直到您下载所有文件的内容。一旦所有文件都在内存中，按顺序将它们添加到 dom 中。

你会想要添加一些额外的东西，比如处理失败之类的，但这是如何做的大致轮廓。

【讨论】：

【解决方案2】：

假设您使用以下方法异步加载文件 1 和 2：

function load(URI) {
    $.ajax({
        url: URI,
        dataType: "script",
    });
}

并且文件 2 依赖于文件 1，那么文件可以异步加载为：

load(url1)
  .then(load(url2));

如果文件 2 不依赖于文件 1，那么它们可以加载为：

$.when(load(url1), load(url2))
    .then(function(e) { // both scripts loaded successfully});

【讨论】：

【解决方案3】：

您可以只添加脚本标签而不是进行 ajax 调用：

var scripts = ['a.js', 'b.js'],
    idx;

for(idx in scripts) {
    if(scripts.hasOwnProperty(idx)) {
        document.write(['<script src="', scripts[idx], '"></script>'].join(''));
    }
}

脚本将异步加载，但会按照您添加它们的顺序同步执行。

【讨论】：