Using a variable with changing value in setTimeout function approach?

Question

Please let me know if I'm coming 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.

possible duplicate of Javascript closure inside loops - simple practical example — davin
– davin, Commented May 17, 2012 at 9:06
stackoverflow.com/questions/341723/… stackoverflow.com/questions/1331769/… stackoverflow.com/questions/1413916/… — davin
– davin, Commented May 17, 2012 at 9:07

ThiefMaster · Accepted Answer · 2012-05-17 09:16:15Z

13

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

edited May 17, 2012 at 9:16

answered May 17, 2012 at 9:07

ThiefMaster

320k85 gold badges608 silver badges648 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Richard · Accepted Answer · 2012-05-17 09:05:52Z

1

Give this a go:

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

answered May 17, 2012 at 9:05

Richard

8,2903 gold badges39 silver badges60 bronze badges

Collectives™ on Stack Overflow

Using a variable with changing value in setTimeout function approach?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related