javascript - 与 DOMContentLoaded 不同，在 jQuery 的 .ready() 之前执行的非 jQuery .ready() 替代方案

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() 排队之前排队，所以答案附加到与 .ready() 相同的队列也将解决我的问题，而不仅仅是抢占 all .ready() 的答案。但是抢占所有 .ready() 可能更可取，因为它适用于更广泛的情况。

---

(关于导致它在所有 document.addEventListener("DOMContentLoaded") 之前执行的 jQuery 的 .ready() 是什么的任何清晰简单的解释加分> 不管它们是什么时候定义的，我都弄不明白)

Answer 1

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

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

浏览器完成这些步骤

1. 浏览器加载 jquery.js
2. jQuery 在 DOMContentLoaded/load 上初始化并添加监听器
3. 您的代码运行时会在 DOMContentLoaded 上添加监听器并添加 .ready() 回调
4. DOMContentLoaded 被触发
5. jQuery 的监听器在队列中排在其他监听器之前，因此它首先被触发
6. jQuery 连续执行每个 .ready() 回调
7. 队列中的所有其他 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 是否准备就绪以及它何时执行您的代码。但不能保证它会首先执行。