Javascript loop showing same value 10 times

Question

Why is this function only sending the number 10 ten times. I want it to send 1... 2 ... 3 ... 4 ... 5 and so on but instead its showing 10....10.... 10... 10... I'm not sure why it would. How do I make a loop that returns distinct values?

  for (i = 0; i < locations.length; i++) {

  setTimeout(function() { alert("test"+i.toString()) ; }, 100);
                                                                              }

How do I make a loop that returns distinct values?

By the time the timeout is in effect i has already reached the maximum value. — Running Buffalo, Jan 16 '17 at 19:51

KevBot · Accepted Answer · 2017-01-16T19:59:23.070

3

You can do this by using a closure (pass i back into an immediately invoked function expression (IIFE)). This will maintain the value of i:

for (var i = 0; i < 10; i++) {
  (function(i) {
    setTimeout(function() {
      console.log("test" + i);
    }, 100);
  })(i);
}

To increment the timeout by using the i works the same way. Making sure to wrap the entire timeout call with the IIFE:

for (var i = 0; i < 10; i++) {
  (function(i) {
    setTimeout(function() {
      console.log("test" + i);
    }, i * 100);
  })(i);
}

edited Jan 16 '17 at 19:59

answered Jan 16 '17 at 19:45

KevBot

17,900
5
50
68

Yes this works =) is there anyway I can closure i to also increment the set time out? i*100 for instance? – Peter S McIntyre Jan 16 '17 at 19:54
@PeterSMcIntyre, yep, easy to do by moving all of the setTimeout code into the IIFE. Check updated answer. – KevBot Jan 16 '17 at 20:00

Javascript loop showing same value 10 times

1 Answers1