Question

我正在制作一个涉及p5.js的小型浏览器游戏。我的HTML基本上是这样：

<!-- ... -->
<body>
    <script type="text/javascript" src="js/vendor/p5.min.js"></script>
    <script type="text/javascript" src="js/vendor/p5.sound.min.js"></script>
    <!-- ... -->
    <script type="text/javascript" src="js/various/other/scripts.js"></script>
    <!-- ... -->
    <script type="text/javascript" src="js/sketch.js"></script>
</body>
<!-- ... -->

大多数情况下，此设置有效。但是，有时候（当我第一次在浏览器中加载页面时），我从ReferenceError: p5 is not defined收到p5.sound.min.js，从ReferenceError: loadSound is not defined收到sketch.js这样的错误。刷新页面后，一切正常，直到关闭浏览器窗口。

在我看来，脚本是无序执行的，因为如果在未运行先决条件的情况下运行脚本，这些错误就会发生。（{sketch.js要求p5.sound.min.js要求p5.js。）我将它们放在HTML中的顺序就是我希望它们运行的顺序。

我知道async和defer会影响浏览器加载和执行JavaScript的方式，我已经尝试了后者。但是：

将defer添加到所有<script>标签似乎没有任何改变。
没有async或defer（如上所述）的情况下，是否可以保证执行顺序是正确的？

还有其他需要记住的地方吗？

Answer 1

一如既往，在发布问题之后，您会找到一条通往解决方案的新线索。

显然，这与JS执行顺序无关，但与a bug in Firefox that prevents local files from loading if they end in '.min.js'有关。我认为目前的解决方法是从CDN加载p5，或将文件名更改为不包含min。

如何控制脚本的执行顺序？

1 个答案: