窗口.加载和文档.Ready:多次指定执行顺序

window.onload and document.ready : execution order in case specified multiple times

本文关键字：执行 顺序 加载 文档 Ready 窗口      更新时间：2023-09-26

我们都知道我们可以使用文档。准备多次，它们将按照脚本中提到的顺序一个接一个地执行。

我们也知道我们可以使用window。只加载一次。

这里的问题是，如果我们使用window会发生什么。onload吗?这个错误是执行第一个而忽略其余的还是执行最后一个而忽略其余的?

jsFiddle: https://jsfiddle.net/CanvasCode/ouk7aatj/

最后一次onload将被触发，之前所有的onload语句将被忽略

window.onload= function() {
  alert("Onload 1");
};
window.onload= function() {
  alert("Onload 2");
};

var i = 0;
window.onload= function() {
     i = 10;
  alert(i);
};
window.onload= function() {
    i++
  alert(i);
};

输出:1

你可以给窗口附加一个函数。像这样Onload事件监听器，如果你想让它像document.ready

一样"行动"

jsFiddle: https://jsfiddle.net/CanvasCode/ouk7aatj/1/

window.addEventListener('load', function (){
    alert('Function #1');
});
window.addEventListener('load', function (){
    alert('Function #2');
});

首先，$(document).ready(...)和window.onload有根本的区别。第一个在HTML文档加载之后发生，原生onload在窗口加载时发生，这意味着也加载了资源(图像，…)。

看下面的例子:

window.onload = function () { console.log(1); }
window.onload = function () { console.log(2); }

意味着第一个函数被指向第二个函数所覆盖。在您的控制台中，输出将是2，并且console.log(1)将永远不会执行。

另一方面，你的jQuery: 
$(document).ready(function () { console.log(1); });
$(document).ready(function () { console.log(2); });

两个函数都将被调用，输出将同时是1和2。

原因是$(document).ready(fn)是jQuery提供的一个函数，它接受一个函数并将其添加到一个队列中，该队列在文档准备好时执行。

另一方面是窗口。onLoad是窗口对象上的一个属性，当页面加载时，浏览器会调用该属性。因此，如果你访问它两次，它就会被覆盖。如果您这样做，您可以构建类似于$(document).ready(fn)的接口:

window.onLoadQueue = []
window.onLoad = function() {
    window.onLoadQueue.forEach(function(fn) {
        fn()
    });
};
window.addOnLoad = function(fn) {
    // TODO: test if fn is a function
    window.onLoadQueue.push(fn);
}
相关文章：