“readyState ===‘Interactive”和“Jquery.ready()”的区别

Question

今天我在和DOM readyState玩，我在JQuery.ready()里发现了一些奇怪的东西，

JQuery.ready()事件发生在DOMContentload事件之前，然后我将interactive放入代码中

喜欢：document.readyState === "interactive"

那么这段代码是在Jquery.ready()之前加载的，所以，我有一个问题，是

JQuery.ready()等于还是类似于document.readyState === "interactive？JQuery在.ready()事件中应用了什么技术？我是如何在我的纯Javascript中应用这个.ready()的？

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

在这里我的小提琴

Answer 1

当我们浏览某些内容时，document.readyState可以是以下内容之一：

loading

文档仍在加载中。

interactive

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

complete

文档和所有子资源已完成加载。状态指示load事件即将触发。

JQuery.ready()不等于或类似于document.readyState === "interactive，因为.redyState返回字符串interactive或loading浏览器从服务器同步数据，当它完成时返回complete字符串并创建load事件。

jQuery使用上述功能为其库创建doc.ready()。

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

​

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);

​

1. 了解一下jQuery所做的事情(无论脚本标记放在哪里，它都能工作)。

​

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.")
        });

​

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

1. 了解一下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);

获取的信息来自:MDN上的document.ready