Please let me know if I'm ing at this block on a wrong angle. I have a series of functions I'd like to fire off, and I'd like to be able to set them all up in a loop.

for(var jj = 0; jj<monster.frames.length;jj++){
    setTimeout(
        functionName(jj),
        1000*jj
    );
}

The problem is that when that when functionName(jj) is exectuted, it's being passed the value of jj which by that time has been changed to the last loop iteration value.

Please let me know if I'm ing at this block on a wrong angle. I have a series of functions I'd like to fire off, and I'd like to be able to set them all up in a loop.

for(var jj = 0; jj<monster.frames.length;jj++){
    setTimeout(
        functionName(jj),
        1000*jj
    );
}

The problem is that when that when functionName(jj) is exectuted, it's being passed the value of jj which by that time has been changed to the last loop iteration value.

• javascript

• 2 possible duplicate of Javascript closure inside loops - simple practical example – davin Commented May 17, 2012 at 9:06
• stackoverflow./questions/341723/… stackoverflow./questions/1331769/… stackoverflow./questions/1413916/… – davin Commented May 17, 2012 at 9:07
• duplicate-->stackoverflow./questions/2171602/… – rt2800 Commented May 17, 2012 at 9:08

2 Answers 2

You need to ensure the inner function has a new variable for every iteration. The easiest way to do this is to create a self-executing anonymous function which receives the variable as an argument. You also need to fix the way you are calling the function - right now you register the return value of functionName(jj) as a callback. This would only be ok if that function actually returned a function.

for(var jj = 0; jj<monster.frames.length;jj++){
    (function(jj) {
        setTimeout(
            function() { functionName(jj); },
            1000*jj
        );
    })(jj);
}

You can also use partial application to create a new function. However, old browsers do not support Function.prototype.bind so you'd have to add a shim for it.

for(var jj = 0; jj<monster.frames.length; jj++){
    setTimeout(functionName.bind(this, jj), 1000*jj);
}

Give this a go:

for(var jj = 0; jj < monster.frames.length; jj++)
{
    (function(x)
    {
        setTimeout(function()
        {
            functionName(x)
        }, 1000 * x);
    })(jj);
}