与DOMContentLoaded不同，非jQuery .ready（）替代执行BEFORE jQuery的.ready（） [英] non-jQuery .ready() alternative that executes BEFORE jQuery's .ready(), unlike DOMContentLoaded

问题描述

我正在创建一个非jQuery依赖的插件，为了与各种现有流行的jQuery功能和插件很好地配合，必须在到达DOM结束后执行函数，但是之后执行以后使用jQuery排队的任何内容 .ready（）。

I'm making a non-jQuery-dependent plugin which, to play nicely with various existing popular jQuery features and plugins, must execute a function after the end of the DOM has been reached, but not after the execution of anything later queued using jQuery .ready().

标准的非jQuery .ready（）替代方案是 document.addEventListener（ DOMContentLoaded，function（）{}）; 。

The standard non-jQuery .ready() alternative is document.addEventListener("DOMContentLoaded",function(){});.

如果页面的函数延迟使用jQuery .ready （）和 DOMContentLoaded ：

If a page has functions deferred using both jQuery .ready() and DOMContentLoaded:

• 所有jQuery .ready（）按照定义顺序执行


• ... 然后所有 DOMContentLoaded 按照定义的顺序执行：

• all the jQuery .ready()s execute in the order they were defined
• ...then all the DOMContentLoadeds execute, in the order they were defined:

...和两者都发生在交互式和完成文件readyStates：

...and both occur between the interactive and complete document readyStates:

 document.addEventListener("readystatechange", function () { alert(document.readyState); });

document.addEventListener("DOMContentLoaded", function(event) { alert(1); });
                          
$(document).ready(function(){ alert(2); });

document.addEventListener("DOMContentLoaded", function(event) { alert(3); });

$(document).ready(function(){  alert(4); });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

我可以使用什么，如 document.addEventListener（DOMContentLoaded）但是没有被任何和所有jQuery .ready（）这样的预先占用？

What can I use which is like document.addEventListener("DOMContentLoaded") but is not pre-empted by any and all jQuery .ready()s like this?

要成为清楚确切的时间，在我的特定情况下，我可以保证这个时间至关重要的代码排队在任何 .ready（）排队之前，所以答案附加到与 .ready（）相同的队列也将解决我的问题，而不仅仅是先发制人所有 .ready的答案。 （）秒。但是抢占所有 .ready（）可能更可取，因为它适用于更广泛的情况。

To be clear about the exact timing, in my particular case, I can guarantee that this time-crucial code is queued before any .ready()s are queued, so answers which append to the same queue as .ready() will also solve my problem, not just answers which pre-empt all .ready()s. But pre-empting all .ready()s is probably preferable, since it would be applicable for a wider range of cases.

（关于jQuery的 .ready（）是什么的明确简单解释的奖励积分要在所有 document.addEventListener（DOMContentLoaded）之前执行，无论它们何时被定义，我都无法弄明白）

(bonus points for any clear simple explanation as to what it is about jQuery's .ready() that causes it to execute before all document.addEventListener("DOMContentLoaded") regardless of when they were defined, I can't figure it out)

推荐答案

它实际上与.ready（）调用本身无关，它与在代码示例之前加载jQuery的事实有关。

It actually has nothing to do with the .ready() call itself, it has to do with the fact that jQuery is loaded before your code example.

jQuery在加载时为DOMContentLoaded / load添加一个事件监听器，所以当你的代码示例运行时，jQuery已经添加了一个监听器。所以在你的例子中它会在听众面前被解雇。

jQuery adds an event listener for DOMContentLoaded/load when it is loaded, so by the time your code example runs jQuery already has a listener added. So it will get fired before the listeners in your example.

浏览器执行这些步骤

1. 浏览器加载jquery.js


2. jQuery初始化并添加DOMContentLoaded / load上的监听器


3. 您的代码运行会在DOMContentLoaded上添加监听器添加.ready（）回调


4. 触发DOMContentLoaded


5. jQuery的监听器在其他人之前排队，因此首先被解雇


6. jQuery连续执行每个.ready（）回调


7. 队列中的所有其他DOMContentLoaded侦听器接下来被触发

1. Browser loads jquery.js
2. jQuery initializes and adds listener on DOMContentLoaded/load
3. Your code runs that adds listener on DOMContentLoaded and adds .ready() callbacks
4. DOMContentLoaded is triggered
5. jQuery's listener is in the queue before the others so it gets fired first
6. jQuery executes each .ready() callback in succession
7. All other DOMContentLoaded listeners in the queue get fired next

现在，您可以通过在包含jQuery之前添加addEventListener代码来首先调用您的代码

Now you can have yours called first by putting your addEventListener code before your inclusion of jQuery

<script>
    document.addEventListener("DOMContentLoaded", function(event) { alert(1); });
</script>
<script src="jquery.js"></script>
<script>
    document.addEventListener("DOMContentLoaded", function(event) { alert(3); });
    $(document).ready(function(){ alert(2); });
    $(document).ready(function(){  alert(4); });
</script>

演示

<script>
    document.addEventListener("DOMContentLoaded", function(event) { alert(1); });
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
    document.addEventListener("DOMContentLoaded", function(event) { alert(3); });
    $(document).ready(function(){ alert(2); });
    $(document).ready(function(){  alert(4); });
</script>

如果您无法控制代码的位置，则可能会运气不佳。您可以尝试使用快速执行的间隔计时器（即每毫秒）并检查dom是否准备就绪以及何时执行代码。但不能保证它会先被执行。

If you do not have control over the placement of your code, you might be out of luck. You could try using a interval timer that is executed quickly (ie every millisecond) and check if dom is ready and when it is execute your code. But there is no guarantee it will get executed first.

这篇关于与DOMContentLoaded不同，非jQuery .ready（）替代执行BEFORE jQuery的.ready（）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！