javascript - 异步加载js但同步执行

Question

场景是我有很多 js 文件。根据不同的平台调用不同的文件。所以我有一个问题，因为我想异步加载文件。但是这些文件的执行应该同步完成。目前我正在做这个函数调用

  function loadScriptJs(src) {   
     Console.log(' Call to file '+src);
     var file = document.createElement('script'),
            head = document.getElementsByTagName('head')[0];
    file.type = 'text/javascript';
    file.setAttribute("defer","defer");
    file.setAttribute("src",src);
    head.appendChild(file);
        file.onload = function() {            
              console.log(src + " is loaded.");
        };
  }

现在我有一个数组，其中包含正在调用的 js 文件列表。我遍历数组并为每个 src 调用此函数。我在每个 js 文件中使用了 document.ready 函数。这里我检查了文件的依赖关系并优化了顺序。即依赖文件加载较晚(在数组中较晚)，而更多类似父文件的文件较早加载。

示例:- 如果我有文件 A1、B2、C3、D4、E5 ..... 同样明智。我的数组是 ['js/A1.js','js/B2.js','js/C3.js'...]。当我在循环中运行它时。我得到“调用文件 [文件名]”的控制台与数组中的顺序相同，但“[文件名] 已加载”的控制台未按预期顺序出现。

是的，我无法控制通过互联网加载。但我希望执行是同步的。即当最后一个文件完成加载时开始执行所有文件。

任何人都可以为我提供任何意见、建议或想法。

Answer 1

动态插入的脚本可能不遵守 defer 属性。 script 标签有一个 async 属性。默认情况下是真的。明确将其设置为 false。

file.setAttribute("async", "false");

或在纯 HTML 中

<script type="text/javascript" async=false src="A1.js"></script>

您可能还需要删除每个脚本中的 document.ready 方法，并在顶层启动脚本的逻辑，将每个 JS 脚本附加到 body 的底部> 标记而不是标题。如果多个脚本在事件触发前注册就绪事件，您将不知道它们将按什么顺序被调用。