Strange logic with setInterval()

Question

I'm new to learning javascript and getting strange behaviour that I don't understand

So this is printing exactly what I expect. 0,1,2,3,4

var numberOfPlayers = 5;
for ( i = 0; i < numberOfPlayers; i++ ) {
    alert(i);
}

But when I try the following code where I want to run a function every 1 seconds I get, 5,5,5,5,5

var numberOfPlayers = 5;
for ( i = 0; i < numberOfPlayers; i++ ) {
    setInterval(function () {
        alert(i);
    }, 1000);
}

Can anyone explain to me what is actually happening here. I would expect the same numbers in both parts of code.

possible duplicate of [setInterval() within for .. in loop](http://stackoverflow.com/questions/7749090/setinterval-within-for-in-loop) — jcaron, Aug 25 '14 at 14:12
possible duplicate of [Javascript infamous Loop issue](http://stackoverflow.com/questions/1451009/javascript-infamous-loop-issue) — adeneo, Aug 25 '14 at 14:13
Yep Sorry pointy your right. It's something i had early that did the other. I'll correct the question. — , Aug 25 '14 at 14:17

score 2 · Answer 1 · answered Aug 25 '14 at 14:11

In the first instance, you alert the value of i as it goes around the loop.

In the second, you alert the value of i after one second. By the time that second has passed, the loop has finished going around five times, so the value of i at the time is the last value of i.

score 1 · Accepted Answer · answered Aug 25 '14 at 14:16

The I is not bound in the inner function inside the loop -- to something like this to bind it in each iteration of the loop

var numberOfPlayers = 5;
for ( i = 0; i < numberOfPlayers; i++ ) {
   (function(i) { 
      setInterval(function () {
          alert(i);
      }, 1000);
   })(i);
}

score 0 · Answer 3 · answered Aug 25 '14 at 14:14

You should be getting 5 5 5 5 5. The reason is that your for loop very quickly runs and binds the function to run 5 times. It iterates through itself until i is equal to 5. By the time the second is up and the function is scheduled to run, i is equal to 5. It will then repeat every 1 second 5 times.

score 0 · Answer 4 · edited May 23 '17 at 12:24

As @Quentin explained in his answer, it's an issue of timing and because of the closure inside of setInterval(). There's a good explanation here: Javascript infamous Loop issue?.

For a case like this I would probably use the code @Soren suggested. Another option would be to use a separate function:

var numberOfPlayers = 5;
for ( i = 0; i < numberOfPlayers; i++ ) {
    intervalAlert(i);
}

function intervalAlert(i) {
    setInterval(function () {
        alert(i);
    }, 1000);
}

See also http://blog.mixu.net/2011/02/03/javascript-node-js-and-for-loops/

Strange logic with setInterval()

4 Answers4