延迟一段时间后如何在 window.onload 中加载 javascript 函数答案

【问题标题】：How to load javascript function in window.onload after some delay延迟一段时间后如何在 window.onload 中加载 javascript 函数
【发布时间】：2011-04-08 11:06:45
【问题描述】：

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

function foo() {
    // javascript code
}

window.onload = setTimeout(foo, delay);

function bar() {
    // javascript code
}

window.onload = setTimeout(bar, delay);

如果我删除延迟，“bar”会在 Firefox 中调用，“foo”和“bar”会在 chrome 中调用。这可能是什么问题？

【问题讨论】：

标签： javascript firefox google-chrome firefox3.6

【解决方案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);
};

【讨论】：

【解决方案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);
        }
    }

希望对你有帮助。

【讨论】：

函数数组的思路相当简洁。如果你添加一些var arr = []; 和arr.push(a); arr.push(b); 那就完美了:)

【解决方案3】：

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

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

【讨论】：

@Koooilnc 感谢您的提示。你能告诉我们如何动态地做到这一点，因为根据一些命名约定，单选按钮中的所有项目通常都有一个 JavaScript 函数（例如，我可能有 2 个或 3 个或 4 个或多个选项）。
@Kalpana 不确定您的意思：window.onload = [somefunction] 表示：在文档加载后启动 somefunction。之后，您可以使用单击单选按钮等功能。如果您希望它们触发带有某个 delay 的页面重新加载，您可以尝试在 html (thisorthat.html?delay=10) 中放置一个参数。搜索SO寻找参数的使用方式，找到很多答案。

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

【讨论】：