CODEWITHSUNDEEP
javascriptfirefoxgoogle-chromefirefox3.6
Achaius
Achaius

Reputation: 6124

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

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?

Upvotes: 5

Views: 28362

Answers (4)

Álvaro González
Álvaro González

Reputation: 146450

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:

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

Upvotes: 1

Karol
Karol

Reputation: 8053

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.

Upvotes: 3

aroth
aroth

Reputation: 54806

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

Upvotes: 4

KooiInc
KooiInc

Reputation: 122906

Try wrapping the timeout in a function:

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

Upvotes: 1

Related Questions