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

Difference between nested $(document).ready() and $(window).load() events

本文关键字：事件 区别 load ready document 嵌套 window      更新时间：2023-09-26

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

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(文档).ready()。它是否设置了某种标志之类的并在每次调用时检查

$(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();

上面的条件对于第一个/外部load()是成立的，但是对于内部load()不是成立的，因为内部load()的状态没有改变(它保持不变)

相关文章：