如何在延迟一段时间后通过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);

如果我去掉延迟，'bar'会在Firefox中被调用，而在chrome中会调用'foo'和'bar'。这里可能存在什么问题？

- Achaius

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);
};

- aroth

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);
        }
    }

希望它有所帮助。

- Karol

---

函数数组的想法非常巧妙。如果你添加一些 var arr = []; 和 arr.push(a); arr.push(b); 就会完美 :) - Álvaro González

Answer 3

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

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

- KooiInc

---

@Koooilnc 感谢您的提示。您能告诉我们如何动态地实现这一点吗？因为根据某些命名约定，通常对于单选按钮中的所有项目都有一个JavaScript函数（例如，我可能有2个或3个或4个或许多选择）。 - Achaius

@Kalpana 不确定你的意思：window.onload = [somefunction] 的意思是：在文档加载完成后启动 somefunction。之后，您可以使用函数来单击单选按钮等。如果您希望它们触发具有特定“延迟”的页面重新加载，则可以尝试在HTML中放置参数（thisorthat.html?delay=10）。搜索 SO 以了解如何使用参数，可以找到大量答案。 - KooiInc

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年以来没有更新，所以我会确保它在最近的浏览器中正常工作。

- Álvaro González