Timeout Function with Parameters that change on runtime

Question

I'm trying the following:

var timeout = 300;
var colors = ['aqua', 'limegreen']
for (var i=0; i < 4; ++i) {
    console.log(colors[i % colors.length]);
    setTimeout(function() { changeColor(colors[i % colors.length]) }, i * timeout);
}

function changeColor(color) {
    console.log(color);
}

This doesn't work because the parameter for changeColor is resolved when it get's executed...this means, the color will always be the same. In my chrome it also didn't work to pass the params after the timeout:

var color = colors[i % colors.length];
setTimeout(function() { changeColor() }, i * timeout, color);

Well, I now have a workaround with an interval which works...but since I'm here to learn....how is this done with a timeout?

possible duplicate of [Access outside variable in loop from Javascript closure](http://stackoverflow.com/questions/1331769/access-outside-variable-in-loop-from-javascript-closure) — Felix Kling, Sep 08 '11 at 15:30

score 1 · Answer 1 · answered Sep 08 '11 at 15:30

1

You are suffering from a closure problem; the reference to the value of i has been captured and so all the functions contain the same value. You need to do something like this to capture the reference of i at the moment of invoking:

 for(var i = 0; i < 4; i++)
 {
      (function(index)
      {
          setTimeout(function()
          {
              changeColor(colors[index & colors.length]);
          }, index * timeout);
      })(i)
 }

answered Sep 08 '11 at 15:30

Tejs

40,736
10
68
86

Of course this works also (at least with the modulo instead of the & ;). Thanks to you too. – CYB Sep 08 '11 at 16:31

bjornd · Accepted Answer · 2011-09-08T15:37:54.760

1

The anonymous function which calls changeColor will be executed when for cycle will be ended already. So it will equal to the last value it gets. To prevent this capture the value you need in closure by wrapping the call to setTimeout with anonymous function:

for (var i=0; i < 4; ++i) {
    console.log(colors[i % colors.length]);
    (function(i){
        setTimeout(function() { changeColor(colors[i % colors.length]) }, i * timeout);
    })(i);    
}

edited Sep 08 '11 at 15:37

answered Sep 08 '11 at 15:30

bjornd

22,397
4
57
73

Great. Something I should have to catch on my own. Thanks bjornd! – CYB Sep 08 '11 at 16:31

Timeout Function with Parameters that change on runtime

2 Answers2