如何在延迟后加载 window.onload 中的 javascript 函数

Question

我有几个函数应该在 onload 事件延迟后触发。它在 Chrome 中运行良好，但在 Firefox 中则不行。

function foo() {
    // javascript code
}

window.onload = setTimeout(foo, delay);

function bar() {
    // javascript code
}

window.onload = setTimeout(bar, delay);

如果我删除延迟，则在 Firefox 中调用“bar”，在 Chrome 中调用“foo”和“bar”。这里可能有什么问题？

Answer 1

我很惊讶这两个函数都能在任何浏览器中调用。但是您可能会拥有更好的运气，例如：

function foo() {
    // javascript code
    setTimeout(bar, additionalDelay);
}

function bar() {
    // javascript code
}

window.onload = function() { setTimeout(foo, delay); };

编辑：没关系，我明白为什么两个超时都会执行。当您执行以下操作时：

window.onload = setTimeout(bar, delay);

...您实际上并没有设置 window.onload 在延迟后执行您的函数。相反，这是立即调用 setTimeout() 来安排函数调用，并将结果（安排的函数调用的句柄）分配给 window.onload。这是不正确的，并且当某些浏览器尝试将 window.onload 作为函数调用时，可能会导致运行时错误。

您想要做的是将一个函数分配给 window.onload，例如：

window.onload = function() { 
    setTimeout(foo, delay); 
    setTimeout(bar, delay);
};

Answer 2

您可以将 jQuery 与这样的东西一起使用：

$(document).ready(function() { /* your code */ });

或者

$(window).load(function() { /* your code */ });

jQuery 自动将函数添加到堆栈中，并在事件触发后运行它们。

如果你只想用 JS 来做，你可以创建一组函数来触发：

function a() {
        alert('a');
    }

    function b() {
        alert('b');
    }

    var arr = new Array(a, b);

    window.onload = function() {
        for(var i = 0; i < arr.length; i++) {
            setTimeout(arr[i], 1000);
        }
    }

希望它有帮助。

Answer 3

尝试将超时包装在函数中：

window.onload = function(delay) {
                  setTimeout(foo, delay); 
                  setTimeout(bar, delay); 
                };

Answer 4

我可以在您的代码中看到两个基本错误。首先，如果你想传递一个函数作为参数，你需要写出不带括号的函数名；如果添加括号，该函数将立即执行。看一个例子：

function foo(){
    alert("I am foo");
}
function bar(){
    alert("I am bar");
}

setTimeout(foo, 5000);
setTimeout(bar(), 10000);

其次，如果您使用 = 运算符为 .onload 属性赋值，您将覆盖其先前的值，就像 a = 3 一样 覆盖之前的 a 值。

function foo(){
    alert("I am foo");
}
function bar(){
    alert("I am bar");
}
window.onload = foo;
window.onload = bar;

据我所知，您的主要问题是能够添加而不是替换事件处理程序。与往常一样，不存在可以在所有浏览器中安全使用的通用 API。如果您使用框架或库，它可能提供跨浏览器机制。否则，您需要自己查找或编写。过去，我在几个项目中使用过它：

• http://dean .edwards.name/weblog/2005/10/add-event2/

...虽然它自 2005 年以来就没有更新过，所以我会确保它在最新的浏览器中正常工作。