时间戳

首页 > 解决方案 > JS 脚本未按顺序下载和评估

javascript - JS 脚本未按顺序下载和评估

问题描述

我有 3 个<script>标签作为<body>. 他们加载外部 .js 脚本：

    ...
  </div>
  <script src="https://somewhere.com/scripts/script1.js"></script>
  <script src="https://somewhere.com/scripts/script2.js"></script>
  <script src="https://somewhere.com/scripts/script3.js"></script>
</body>
</html>

所有脚本仅包含一行：console.log(Start script X)，其中 X 是脚本编号。我期待脚本按顺序进行评估，输出为：

Start script 1
Start script 2
Start script 3

但输出似乎是随机的。更准确地说，评估顺序似乎完全取决于脚本完成下载的顺序。

我期望评估顺序模仿它们在 HTML 中引用的顺序是否正确？如果不是，我如何确保以正确的顺序评估它们（除了将它们全部合并到一个 .js 文件中）？

标签： javascripthtmlhttp

解决方案

你的观察是正确的。我理解您的期望，但是这种评估顺序意味着文件是按顺序而不是并行下载的，或者它们是按顺序而不是并行进行评估的。

渲染它们以按顺序下载或执行会很麻烦。如果脚本从不下载怎么办？后续脚本是否应该永远挂起？这将比现在的情况更糟糕。

如果脚本不相互依赖怎么办？即使没有意义，他们是否应该互相等待？当然不是。

所以实际的行为是正确的，但你是对的，这也意味着一些问题。

一般来说，这个问题的解决方案是将脚本分解为可以在理想情况下执行的类和函数，而不是在脚本下载时并且在标签中有onload事件或通过.bodyload eventAddEventListener

假设f1 function在 script1中有一个，f2 function在 script2 中有一个，...

然后你可以做这样的事情：

window.addEventListener('load', (event) => {
  f1();
  f2();
  //...
});

你甚至可以这样做：

function load() {
    f1();
    f2();
    //...
}

然后将其添加到body：

<body onload="load()">
    <!-- ... -->
</body>

推荐阅读