Strange behaviour Function within a loop

Question

I can't understand what is happening inside this code, it prints 13 only.

/*jshint loopfunc: true */
for(var i=0;i<13;i++)
    setTimeout(function(){console.log(i)},10);

The output is

13
13
...[10 times more]
13

How can I print 0,1,2,...,12 with lambdas like how I wish to do?

see : http://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example?rq=1 — Hacketo, Sep 02 '15 at 08:18

codebox · Answer 1 · 2015-09-02T08:29:07.820

This should work:

for(var i=0;i<13;i++) {
    (function(j){
        setTimeout(function(){console.log(j)},10); 
    }(i))
}

in your original code the i variable gets incremented all the way up to 13 and then gets used by each of the console.log statements. To fix the problem you can create an anonymous function and pass the i variable to it on each iteration of the loop, this effectively takes a snapshot of the value of i at the time the function was called so console.log prints out the desired values.

score 0 · Answer 2 · answered Sep 02 '15 at 08:24

0

Try this:

for(var i=0;i<13;i++)
    setTimeout(function(index){console.log(index)}.bind(this, i),10);

answered Sep 02 '15 at 08:24

udidu

8,269
6
48
68

Strange behaviour Function within a loop

2 Answers2