如何在加载按需JavaScript文件时防止竞争条件

How to prevent a race condition when loading on-demand JavaScript files?

本文关键字：竞争 条件 文件 JavaScript 加载      更新时间：2023-09-26

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

加载JavaScript文件的代码类似于: 
loadJS: function(url) {
    $.ajax({url: url, dataType: 'script', success: function(){}});
}

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

您可能想要添加一些额外的东西，如处理失败等，但这是如何做到这一点的一般概述。

假设您使用:

异步加载文件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});

您可以直接添加脚本标签，而不是进行ajax调用:

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

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

相关文章：