javascript - 嵌套的 $(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()。它是否设置了某种标志或其他东西，并在我们每次调用它时进行检查。

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() 的状态没有改变(保持不变)