2

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

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

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

3 回答 3

2

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

你会想要添加一些额外的东西，比如处理失败之类的，但这是如何做到这一点的一般概述。

于 2013-03-13T19:29:40.753 回答
0

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

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

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

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

于 2013-03-13T19:48:27.123 回答
0

假设您使用以下方法异步加载文件 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});
于 2013-03-13T19:41:45.333 回答