Javascript JS脚本未按顺序下载和计算_Javascript_Html_Http

Javascript JS脚本未按顺序下载和计算

javascript html http

Javascript JS脚本未按顺序下载和计算,javascript,html,http,Javascript,Html,Http,我有3个标记作为中的最后一个元素。它们加载外部.js脚本： ... </div> <script src="https://somewhere.com/scripts/script1.js"></script> <script src="https://somewhere.com/scripts/script2.js"></script> <script src=&q

我有3个

标记作为

中的最后一个元素。它们加载外部.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>

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

我期望评估顺序模仿HTML中引用它们的顺序，对吗？

如果没有，我如何确保它们的评估顺序正确（除了将它们合并到一个.js文件中）？

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

让它们按顺序下载或执行会很麻烦。如果脚本从未下载过呢？后续脚本是否应该永远挂起？这将比目前的情况更糟糕

如果脚本不是相互依赖的呢？他们是否应该等待对方，即使这样做毫无意义？当然不是

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

通常，这个问题的解决方案是将脚本分解为类和函数，在理想情况下可以执行这些类和函数，而不是在脚本下载时，并且在

主体

标记中有一个

onload

事件，或者通过

AddEventListener

创建一个

load

事件

假设脚本1中有一个

f1

函数

，脚本2中有一个

f2

函数
然后你可以这样做：
window.addEventListener('load', (event) => {
  f1();
  f2();
  //...
});

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

你甚至可以这样做：
window.addEventListener('load', (event) => {
  f1();
  f2();
  //...
});

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

然后将其添加到正文中
：
<body onload="load()">
    <!-- ... -->
</body>


选项1：延迟
说明延迟/异步脚本标记属性。标记为defer
的脚本将按照标记中定义的顺序执行（解析完成后）
 <script src="https://somewhere.com/scripts/script1.js" defer></script>
 <script src="https://somewhere.com/scripts/script2.js" defer></script>
 <script src="https://somewhere.com/scripts/script3.js" defer></script>
 <script src="https://somewhere.com/scripts/script4.js" defer></script>