setInterval and window.onload problem

Question

I have this code

window.onload = function() {            
    function foo() {
        alert("test");
    }
    setInterval("foo()",500)
}

Which returns undefined...When i use it outside the window.onload it works. Can anyone explain me why?

Answer 1

Using a string command in setInterval() will try to look for the function in the global (window) scope, but since the function is defined in a local scope, it won't be found. You should pass the function itself to setInterval() instead.

window.onload = function() {            
    function foo() {
        alert("test");
    }
    setInterval(foo, 500);
}

Answer 2

Try this:

function foo() {
    alert("test");
}

window.onload = function() {            
    setInterval("foo()",500)
}

It works for me.

Answer 3

Alternatively, you can define the function within the call to setInterval:

window.onload = function() {
    setInterval(
        function foo() {
            alert("test");
        },
        500
    );
}

Answer 4

You should set the function to setInterval() instead.

Also remember clearing the interval on window.onunload or window.beforeonunload

const CheckFoo = () => {
    const start = new Date().getTime();

    console.log("check", start);
};
window.onload = function foo() {
    window.setInterval(CheckFoo, 500);
};

window.onunload = function foo() {
    window.clearInterval(CheckFoo);
};