javascript - 嵌套$(document).ready()和$(window).load()事件之间的区别

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

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()事件仅触发一次，因此没有任何其他load事件处理程序执行的机会，那么为什么使用此规则不适用于jQuery(document).ready()。它是否设置了某种标志或其他东西，并在每次调用它时进行检查。

最佳答案

加载HTML文档且DOM准备就绪时，执行$(document).ready()。之所以调用内部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()的状态未更改(其状态保持不变)