我有 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 文件中)？
最佳答案
你的观察是正确的。我理解您的期望，但是这种评估顺序意味着文件是按顺序而不是并行下载的，或者它们是按顺序而不是并行进行评估的。
渲染它们以按顺序下载或执行会很麻烦。如果脚本从不下载怎么办？后续脚本是否应该永远挂起？这将比现在的情况更糟糕。
如果脚本不相互依赖怎么办？即使没有意义，他们是否应该互相等待？当然不是。
所以实际的行为是正确的，但你是对的，这也意味着一些问题。
一般来说，这个问题的解决方案是将脚本分解成可以在理想时执行的类和函数，而不是在脚本下载时也有一个onload。 body 中的事件标签或 load event通过 AddEventListener 创建.
假设有一个 f1 function在 script1 中，f2 function在脚本 2 中，...
然后你可以做这样的事情:
window.addEventListener('load', (event) => {
f1();
f2();
//...
});
function load() {
f1();
f2();
//...
}
body :<body onload="load()">
<!-- ... -->
</body>
关于javascript - JS 脚本未按顺序下载和评估，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/67786531/