问题描述
我正在制作一个涉及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的方式,我已经尝试了后者。但是:
还有其他需要记住的地方吗?
解决方法
一如既往,在发布问题之后,您会找到一条通往解决方案的新线索。
显然,这与JS执行顺序无关,但与a bug in Firefox that prevents local files from loading if they end in '.min.js'有关。我认为目前的解决方法是从CDN加载p5,或将文件名更改为不包含min
。