1

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

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

<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>（如果可能的话，我不希望这样做）？

4

2 回答 2

3

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

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

在此处输入图像描述 图片来源： http: //peter.sh/experiments/asynchronous-and-deferred-javascript-execution-explained/

不过需要注意的是，defer在 IE9 及以下版本中存在错误。

于 2016-05-09T16:30:13.660 回答
1

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

于 2016-05-09T16:33:48.307 回答