DOMContentLoaded 上的事件侦听器随机触发

Question

我在页面上有一个脚本，该脚本大部分时间都在工作，但并非总是如此，我想知道为什么。

此脚本通过以下方式导入：

<script src="script.js" async></script>` tag in `<head>

脚本内容为：

console.log("loading"); // always gets printed
document.addEventListener("DOMContentLoaded", function() {
    console.log("outer"); // sometimes get not printed
    (function() {
        console.log("inner"); // sometimes get not printed
    })();
});

浏览器控制台总是输出 loading 但有时不输出其余部分（outer 和 inner）。在页面上进行硬刷新或简单地重新加载它（点击地址栏上的 Enter）似乎不会影响此行为（每种方式的结果相同）。

我还要补充一点，outer 和 inner 总是成对打印的，缺一不可。

我听歌的方式有问题吗DOMContentLoaded？或者我是否必须在 <head> 之外加载脚本（如果可能的话，我不希望这样做）？

Answer 1

async 脚本标签在代码加载后立即执行，无论 DOM 内容是否已加载。所以一般来说，不要将它用于DOM-相关操作。

相反，如果您希望加载文件但仅在 DOMContentLoaded 之后执行代码，请使用 defer 属性。在这种情况下，您的代码中不需要事件侦听器：

_{图片来源：http://peter.sh/experiments/asynchronous-and-deferred-javascript-execution-explained/}

请注意，defer is buggy in IE9 and below.

Answer 2

您的脚本在 DOMContentLoaded 事件触发后执行，因此设置侦听器为时已晚。

DOMContentLoaded 上的事件侦听器随机触发

Event listener on DOMContentLoaded fires randomly

javascript

domcontentloaded