How to load javascript function in window.onload after some delay

Question

I have couple of functions that should be triggered after some delay in onload event. It works fine in chrome but not in Firefox.

function foo() {
    // javascript code
}

window.onload = setTimeout(foo, delay);

function bar() {
    // javascript code
}

window.onload = setTimeout(bar, delay);

If I remove the delay, 'bar' gets invoked in Firefox and 'foo' and 'bar' get invoked in chrome. What could be the issue here?

aroth · Answer 1 · 2011-04-08T11:16:14.207

I'm surprised both functions get invoked in any browser. But you might have better luck with something like:

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

function bar() {
    // javascript code
}

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

Edit: Nevermind, I see why both of the timeouts execute. When you do something like:

window.onload = setTimeout(bar, delay);

...you are not actually setting window.onload to execute your function after a delay. Instead this is immediately invoking setTimeout() to schedule your function call, and assigning the result (a handle to the scheduled function invocation) to window.onload. This is not correct, and will probably cause a runtime error in some browsers when they try to invoke window.onload as a function.

What you want to do instead is assign a function to window.onload, like:

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

score 3 · Answer 2 · answered Apr 08 '11 at 11:29

You could use jQuery with sth like that:

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

or

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

jQuery automatically adds functions to stack, and run them all once event is triggered.

If you want do it with only JS, you can make array of functions to trigger:

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

Hope it helps.

The idea of the function array is quite neat. If you add some `var arr = [];` and `arr.push(a); arr.push(b);` it'll be perfect :) — Álvaro González, Apr 08 '11 at 12:07

score 1 · Answer 3 · answered Apr 08 '11 at 11:09

1

Try wrapping the timeout in a function:

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

answered Apr 08 '11 at 11:09

KooiInc

119,216
31
141
177

@Koooilnc Thanks for the tip. Can you tell us how to do this dynamically, since based on some naming conventions there is usually a javascript function for all items in a radio button (e.g. I might have 2 or 3 or 4 or many choices). – Achaius Apr 08 '11 at 11:19
@Kalpana not sure what you mean: `window.onload = [somefunction]` means: start `somefunction` after the document had loaded. After that you can use functions for clicking radio buttons etc. If you want them to trigger a page reload with a certain `delay`, you can try to put a parameter in the html (`thisorthat.html?delay=10`). Search SO for the way to use parameters, plenty of answers to be found. – KooiInc Apr 08 '11 at 11:34

score 1 · Answer 4 · answered Apr 08 '11 at 11:52

I can see two base errors in your code. First of all, if you want to pass a function as argument you need to write the function name without parenthesis; if you add the parenthesis the function will be executed right then. See an example:

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

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

Secondly, if you assign a value to the .onload attribute with the = operator you'll overwrite its previous value, just like a = 3 overwrites previous the value of a.

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

From what I grasp, your main problem is to be able to add rather than replace event handlers. As usual, there isn't a universal API you can safely use in all browsers. If you are using a framework or library, it probably provides a cross-browser mechanism. Otherwise, you need to find or write your own. In the past, I've used this in several projects:

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

... although it's not been updated since 2005 so I'd make sure it works properly in recent browsers.

How to load javascript function in window.onload after some delay

4 Answers4