using function in setinterval javascript error using function

Question

i wrote a simple function like a timer why does this code don't go right is says Uncaught ReferenceError: a is not defined why?

function timeee(sec) {
    document.getElementById("main").innerHTML = sec;
    --sec;
    if (sec == -1) {
        clearInterval(cleartext);
    }
}
function timer() {
    var a = document.getElementById("time").value;
    var cl = setInterval("timeee(a)", 1000);
    window.cleartext = cl;
}

score 0 · Accepted Answer · edited May 23 '17 at 12:29

As you can see in this other question, when you use setInterval with a string, the function is run on a global scope. However, your a variable is only locally set, so the timeee() function cannot see it.

Try using:

function timer() {
    var a = document.getElementById("time").value;
    var cl = setInterval(function() { timeee(a) }, 1000);
    window.cleartext = cl;
}

Or if you really want to use a string, define a as a global variable:

var a;
function timer() {
    a = document.getElementById("time").value;
    var cl = setInterval("timeee(a)", 1000);
    window.cleartext = cl;
}

score 0 · Answer 2 · answered Jul 16 '14 at 02:22

why?

Scope.

Consider:

function timer() {
    var a = document.getElementById("time").value;
    var cl = setInterval("timeee(a)", 1000);
    window.cleartext = cl;
}

a is locally scoped, but timeee(a) will be called from global scope. It doesn't have access to a. Try:

    var cl = setInterval(function(){timeee(a)}, 1000);

so you keep the value of a in a closure. Note that this will keep passing the same value of a every time, so you need to address that issue too (Banana's answer is one option).

Oh. Interesting. My guess was wrong then. This is good to know. — Kodlee Yin, Jul 16 '14 at 02:24

score 0 · Answer 3 · answered Jul 16 '14 at 02:23

After some thought, my best guess to this would be that the reference to "a" is not a proper closure.

Think of it this way: you're passing a string to setInterval. Implicitly, when you pass a string to setInterval or setTimeout, an eval() somewhere is being called.. Because at runtime, the interpreter does not know that the variable a is being used elsewhere, it will throw it away. Then, when the eval gets executed, the argument a is not there anymore.

Now take a look at the solution to your issue:

function timer() {
    var a = document.getElementById("time").value;
    var cl = setInterval(function() { timeee(a) }, 1000);
    window.cleartext = cl;
}

Because the interpreter knows that a will still be used sometime later, it will not be destroyed. This is a proper closure.

using function in setinterval javascript error using function

3 Answers3