嵌套的$(document).ready()和$(window).load()事件有什么区别？

Question

我知道这些状态之间的基本区别，但在我们的一个项目中出现了一个奇怪的问题。

jQuery(document).ready(function () {
   console.log('Dom is ready');
   jQuery(document).ready(function () {
       console.log('Inner Dom ready');
   });
});

结果：

Dom is ready
Inner Dom ready

现在，无论何时我调用document.ready()，它都会执行其处理程序。

但是，如果你看一下这个例子

jQuery(window).load(function () {
    console.log('Window Loaded');
    jQuery(window).load(function () {
        console.log('Inner window load');
    });
});

结果：-

Window Loaded

为什么内部窗口的加载事件处理程序从未执行，即使窗口已经加载完成。 感谢您的评论和答案，但我只是好奇它们是如何在内部工作的。我同意jQuery(window).load()事件仅触发一次，因此没有其他加载事件处理程序执行的机会，那么为什么这个规则不适用于jQuery(document).ready()呢？它是否设置了某种标志或一些检查，每次调用时都会检查。

- Amit Singh

---

请查看此链接：https://dev59.com/-W455IYBdhLWcg3wAvXQ - Dil85

你为什么要嵌套它们呢？我想这是因为 window.onload 只能被调用一次，但 jQuery 将函数封装在某个东西中，所以只有当窗口实际加载时才能调用它，而不是稍后，这就是为什么内部调用不起作用的原因。而 DOMContentLoaded 和 jQuery 的 ready 只要文档已经加载，就会随时被调用。 - adeneo

Answer 1

$(document).ready()在HTML文档加载和DOM准备就绪时执行。因此，内部的ready()会被调用，因为DOM已经准备就绪了。ready()只检查当前状态，不与先前状态进行比较。因此条件应该像这样：

if state=="ready" then invoke latest $(document).ready();

这个条件对所有级别的ready()方法都成立。

但是

$(window).load()在完全加载页面时执行，包括所有框架、对象和图片。简单来说，load()会在状态从另一个状态变为已加载状态时执行。第一个load()在从另一个状态变为已加载状态时执行，但内部的load()没有被检测到并且状态发生了改变，因此它不会被执行。

if (is_state_changed=true AND current_state=="ready" AND current_state !== previous_state) then invoke latest $(window).load();

上述条件适用于第一个/最外层的load()，但不适用于内部load()，因为内部load()的状态未改变（保持不变）。

- Haresh Vidja

---

我已经在修改后的答案中解释了两者的逻辑。 - Haresh Vidja