在异步延迟问题上运行多个脚本[重复]

Posted 2023-03-22

【中文标题】在异步延迟问题上运行多个脚本[重复]

【英文标题】：Running multiple scripts on async defer problems [duplicate]

【发布时间】：2020-05-25 13:41:02

【问题描述】：

我有 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

【问题讨论】：

Script Tag - async & defer 的副本

@MrUpsidown 据我所知，您所说的可能重复的这篇文章似乎没有考虑同时使用异步和延迟，也没有讨论其后果。这个问题对我来说似乎不是重复的

@jeprubio 引用已接受的答案：如果您的第二个脚本依赖于第一个脚本（例如，您的第二个脚本使用第一个脚本中加载的 jQuery），那么您无法制作它们async 不需要额外的代码来控制执行顺序，但是你可以让它们延迟，因为延迟脚本仍然会按顺序执行，只是在文档被解析之后。 - 这不是我们在这里讨论的内容吗？您的答案中还包括什么？

@MrUpsidown 好吧，即使我同意它非常相似，我仍然认为它不一样。如果大家觉得都一样可以关闭，当然我也没什么好说的了。我只是指出，其他问题和答案似乎没有考虑使用脚本并与 OP 一样使用脚本和延迟以及后果。例如，它并没有说这是一个可能的回退，并且在这种情况下这将是不同浏览器中的行为。只是这个。对我来说，这个问题更进一步，但这只是我的意见

@MrUpsidown 正如我所说，我“暂时”接受了答案，因为它解决了我目前的困境。是否应该有一段时间我需要在异步延迟上运行两者？ （不确定是否会有任何东西。）

【参考方案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

即使指定了 async 属性，也可以指定 defer 属性，以导致仅支持 defer（而不是异步）的旧版 Web 浏览器回退到 defer 行为而不是默认的同步阻塞行为。

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

【讨论】：

谢谢，它现在可以工作了 XD。但我可以发誓我试过这个。哈哈。还要感谢关于何时使用它们的最佳实践:)