Question

my question is actually one of understanding – I have a working solution, I just don’t understand how it works.

Okay, so – what I’m trying to do is adding a setTimeout in a loop, and passing a changing value through it. Example:

for (i=0;i<11;i++)
{
     setTimeout("alert(i)",1000);
}

If I understood correctly, this doesnt work because Javascript does not (like PHP) pass the value of i to the function, but passes a reference of i – which in turn is not static, but continues to change with the counter.

I found a solution, which goes like this:

for (i=0;i<11;i++)
{
    setTimeout(function(x){return function(){alert(x)};}(i),1000);
}

I don’t really understand what this actually does. It looks like it passes a the “alert” function back to the calling function, but I can’t make any sense of that.

I can work with this solution and also adapt it to other contexts, but I’d really like to understand all of my code, not just use stuff I found somewhere and be happy it works. And in addition, I’m looking for a slimmer version to achieve the same goal.

Thanks, Marco

Answer 1

The reason you’re calling a function that returns a function is that you need to have some way for the function being passed to setTimeout() to have a reference to the current value of i.

Because the code waits to run for 1000ms, the for loop will be complete before it runs, and the value if i will be 11.

But because a function has its own variable scope, you can pass the value of i into the function that is being called immediately, so that it is referenced by the local variable x, which the function being returned can reference when setTimeout() finally calls it.

for (i=0; i<11; i++) {
    setTimeout(function(x){
                 // CONTINUE HERE:
                 // x is a local variable to the function being executed
                 //    which references the current value of i

                 // A function is being returned to the setTimeout that
                 //    references the local x variable
                 return function(){ alert(x); };

               }(i) // START HERE:
                    // The "outer" function is executed immediately, passing the
                    //   current value of "i" as the argument.
     ,1000);
}

So you’re ending up with an equivalent that would be something like this:

setTimeout( function(){ alert(x); }, 1000); //...where x === 0
setTimeout( function(){ alert(x); }, 1000); //...where x === 1
setTimeout( function(){ alert(x); }, 1000); //...where x === 2
setTimeout( function(){ alert(x); }, 1000); //...where x === 3
// etc.