javascript - "readyState === ' Interactive' "and "Jquery.ready() 之间的差异

Question

今天我在玩DOM readyState ,我在 JQuery.ready() 中发现了一些奇怪的东西,
JQuery.ready()事件发生在 DOMContentload 之前事件然后我把 interactive在我的代码中

喜欢:document.readyState === "interactive"
然后这段代码在 Jquery.ready() 之前加载所以，我有一个问题，是
JQuery.ready()等于或类似于 document.readyState === "interactive ?
和什么技术 JQuery 适用于那里 .ready() 事件？
我如何应用此 .ready()在我的纯 Javascript 中？

我阅读了很多类似的帖子，但没有人给出实现 JQuery.ready() 的确切解决方案。在 JavaScript 上，它们都在 DOMContentload 之后加载不是当 .ready() .

Here MY Jsfiddle

Answer 1

当我们浏览一些东西时 document.readyState可以是以下之一:

loading

文档仍在加载。

interactive

文档已完成加载且文档已被解析，但图像、样式表和框架等子资源仍在加载。

complete

文档和所有子资源已完成加载。状态表示 load事件即将发生。 JQuery.ready()不等于或类似于 document.readyState === "interactive因为 .redyState返回一个字符串 interactive或 loading浏览器正在从服务器同步数据，完成后返回 complete字符串并创建一个 load事件。
jQuery 使用上述功能创建 doc.ready()为他们的图书馆。

如果您希望在加载文档后运行您的函数，有很多方法...但其中之一是

function myFun(){
  // All your JS code which will use in your document
  console.log("Hey now I am ready to run");
}
// just call the myFun() in a eventListene function as callback function
//the myFun will run after the 
document.addEventListener('DOMContentLoaded', myFun, false);

一点点了解 jQuery 的作用(在放置 script 标签的任何地方都可以工作)。

const ready =(fun) => {
   if(document.ready == 'interactive' || document.readyState =="complete"){
      // calling function
      setTimeout(fun, 1);
          }
          // we can also implement by event listner
          else {
            document.addEventListener("DOMContentLoaded", fun);
          }
        }
ready(() =>  {
          // This is the functin whitch pass to the ready function
          console.log("I am ready.")
        });

嘿，我知道这不好，但背后的想法就是这样。

有点想法 jQuery 做什么(它会在放置脚本标记的任何地方工作)。
替代方法是
如果支持，它会尝试标准:

window.addEventListener('load', fn, false )
回退到:

document.addEventListener('DOMContentLoaded', fn, false);

回退到:

window.addEventListener('load', fn, false )

或者对于旧版本的 IE，它使用:

document.attachEvent("onreadystatechange", fn);



window.attachEvent("onload", fn);

信息取自: document.ready on MDN