Vanilla JS ready() 函数——什么是 `document.

Question

我知道以前曾在这里问过类似的问题，但我找不到任何提出或回答这个特定问题的问题。我想要一个尽可能简单的纯 JavaScript 就绪函数，它在页面完全加载时运行，类似于 jQuery$(document).ready()函数。我一直在寻找这个例子：if (document.readyState === "complete" || (document.readyState !== "loading" && !document.documentElement.doScroll)) {    // Document already fully loaded    ready();} else {    // Add event listener for DOMContentLoaded (fires when document is fully loaded)    document.addEventListener("DOMContentLoaded", ready);}function ready() {    // Handler here}但是给出这个例子的网站总是谈论对旧版本 IE 的支持，我不需要那个。我只想支持现代浏览器（Chromium Edge、Chrome、Firefox、Opera 和 Safari），并希望找到一个更简单的解决方案，尤其是关于document.readyState !== "loading" && !document.documentElement.doScroll. 我似乎找不到太多关于 的信息document.documentElement.doScroll，至少不是来自像 MDN 这样的可靠来源，所以我不知道它到底做了什么，或者删除它是否会导致 ready 函数在某些边缘情况下中断。我想我要问的是：document.readyState !== "loading" && !document.documentElement.doScroll从示例代码中删除是否安全，当您只关心当前的主要浏览器（上面列出的）时，现在是否有更好的方法来执行此操作？

Answer 1

看起来doScroll是 IE 的东西。不过readyState检查很有用，因为如果 DOMContentLoaded 事件已经发生，它就不会触发。因此，如果您不需要 IE 支持，我会说您可以删除 doScroll 检查，留下：

if (document.readyState === "complete") {

    // Document already fully loaded

    ready();

} else {

    // Add event listener for DOMContentLoaded (fires when document is fully loaded)

    document.addEventListener("DOMContentLoaded", ready);

}

function ready() {

    // Handler here

}