jquery - “load”在另一个 'load' 回调中不起作用，但 'ready' 可以

Question

我想向“load”事件添加回调，并希望它在所有“load”回调结束时执行。所以我在另一个“加载”回调中注册了一个“加载”回调，但它不起作用。我尝试了与“准备好”相同的逻辑，它起作用了。我的问题是为什么这不适用于“加载”？

我的 jQuery 版本是 3.4.0

//this 'ready' part works
$(document).ready(function() {
    console.log('ready1');
    $(document).ready(function() {
        console.log('ready2');
    });
});

//this 'load' part doesn't work. Only 'load1' is printed.
$(window).on('load', function() {
    console.log('load1');
    $(window).on('load', function() {
        console.log('load2');
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 1

$(document).ready 正在调用一个特殊的 jQuery 函数，一旦文档准备好，该函数将运行关联的处理程序，或(如果文档已经准备好) ，处理程序将立即运行。有点像:

// $(document).ready:

(callback) => {
  if (document.readyState === 'complete') {
    callback();
  } else {
    document.addEventListener('DOMContentLoaded', callback);
  }
};

另一方面，on 处理程序将仅附加监听器，而不检查事件是否已触发:

// $(window).on('load'

(callback) => {
  document.addEventListener('load', callback);
};

通过 on 附加监听器就像调用 addEventListener 一样，没有其他任何事情(所以如果 load 事件已经在 on('load' 被调用，回调将永远不会运行)。$(document).ready 涉及一些额外的逻辑。