Question

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

标准的非jQuery .ready()替代方案为document.addEventListener("DOMContentLoaded",function(){});。

如果页面包含使用jQuery .ready()和DOMContentLoaded延迟的函数：

所有jQuery .ready()按照定义的顺序执行

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

...并且都发生在interactive和complete文件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()抢占这样的内容？

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

（关于jQuery的.ready()是什么导致它在所有.ready()之前执行的任何明确的简单解释的奖励积分，无论它们何时被定义，我都无法弄清楚）

Answer 1

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

jQuery在加载时为DOMContentLoaded / load添加了一个事件监听器，所以当你的代码示例运行时，jQuery已经添加了一个监听器。因此，在您的示例中，它将在侦听器之前被触发。

浏览器执行这些步骤

浏览器加载jquery.js
jQuery在DOMContentLoaded / load
您的代码运行会在DOMContentLoaded上添加侦听器并添加.ready（）回调
触发DOMContentLoaded
jQuery的监听器在其他人之前排队，因此首先被解雇
jQuery连续执行每个.ready（）回调
队列中的所有其他DOMContentLoaded侦听器都会被触发

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

<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是否准备就绪以及何时执行代码。但不能保证它会先被执行。

Answer 2

将您的jqueries放在文档文件的末尾..它有助于您有时解决冲突..：D

Answer 3

如果正确解释问题，您可以使用$.holdReady()

$.holdReady(true);

// do stuff

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

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

$.holdReady(false);

$(document).ready(function() {//do stuff when `$.holdReady(false)` is called});

与DOMContentLoaded不同，非jQuery .ready（）替代执行BEFORE jQuery的.ready（）

3 个答案: