javascript - 在异步延迟问题上运行多个脚本

Question

这个问题已经有答案了:

Script Tag - async & defer (12 个回答)

已关闭 3 年前。

我有 2 个脚本，应该使用异步延迟运行。但问题是第二个脚本依赖于第一个脚本。 js-map-label.js仅需要在 googleapis 之后运行已加载并运行。使用此设置，80% 的时间都可以正常工作。但有时它无法运行，所以我不得不一遍又一遍地刷新，直到 js-map-label.js运行。有什么办法可以解决这个问题吗？

我按以下顺序排列这些脚本:

    ...
    <script src="https://maps.googleapis.com/maps/api/js?key=__MY_KEY_HERE__...." async defer></script>
    <script src="/static/js/js-map-label.js" async defer></script>
    ...
</body>

有时会引发此错误:

js-map-label.js:13 Uncaught ReferenceError: google is not defined
    at js-map-label.js:13
    at js-map-label.js:16

Answer 1

使用defer，文件会异步下载，但仅在文档解析完成时执行。另外，使用 defer 时，脚本将按照调用的顺序执行。当一个脚本依赖于另一个脚本时，这使得延迟选择的属性。

使用async，文件将被异步下载，然后在下载后立即执行。

在您的情况下，您可以使用 defer 以便在文档解析完成时执行 JavaScript，但不 async 如果您想要要保留的依赖项:

<script src="https://maps.googleapis.com/maps/api/js?key=__MY_KEY_HERE__...." defer></script>
<script src="/static/js/js-map-label.js" defer></script>

实际上，defer 用于需要整个 DOM 的脚本和/或其相对执行顺序很重要。异步用于独立脚本，例如计数器或广告。它们的相对执行顺序并不重要。

来自规范:https://www.w3.org/TR/2011/WD-html5-20110525/scripting-1.html#attr-script-async

The defer attribute may be specified even if the async attribute is specified, to cause legacy Web browsers that only support defer (and not async) to fall back to the defer behavior instead of the synchronous blocking behavior that is the default.

因此，如果您使用两种现代浏览器，则只会执行异步操作，而不会保留执行顺序。