嵌套的$(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(窗口).load()事件只触发一次因此没有任何其他加载事件处理程序执行的可能性然后为什么这个规则是不适用于jQuery(document).ready().它是否设置某种旗帜或某种东西,并在每次调用它时进行检查.

Answer 1

$(document).ready()加载HTML-Document并准备好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();

上面的条件对于first/outer是正确的load(),但对于inner load()来说不是真的因为内部没有改变状态(它保持相同)load()