Question

我想向'load'事件添加回调，并希望在所有'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涉及一些额外的逻辑。

'load'在另一个'load'回调中不起作用，但是'ready'可以

1 个答案: