The difference between "readyState ===" Interactive "and" Jquery.ready () "

Question

Today I play with DOM readyState, and I find something strange in JQuery.ready(),

JQuery.ready()the event happens before the event DOMContentload, after which I put interactivein my code

like: document.readyState === "interactive"

Then this code loads up. JQuery.ready()So, I have a question, is there

JQuery.ready()equal or similar document.readyState === "interactive? and what jquery technique is applied there .ready () event? How do I apply this .ready()in my pure Javascript?

I read a lot of similar posts of this type, but no one gives an exact solution for implementation JQuery.ready()in JavaScript, they all load after DOMContentloadnot when .ready().

Here is my jsfiddle