JavaScript closure loop issue in set time out

Question

I've found some example in a tutorial (said it was the canonical example)

        for (var i=1; i<=5 ; i++) {
        setTimeout(function() {
            console.log("i: " + i);
        }, i*1000);
    }

Now, I understand that, closure passes in the current scope in to the function, and I assume that it should output 1,2,3,4,5. But instead, it prints number 6 five times.
I ran it in the chrome debugger, and first it goes through the loop without going in to the function while doing the increment of the i value and only after that, it goes in to the inner function and execute it 5 times.
I'm not sure why its doing that, I know, the current scoped is passed in to the function because of closure, but why does it not execute each time the loop iterate?

This is because you are updating the value of `i` in for loop. By the time your timeout function is executed, the value of `i` is 6 — Vigneswaran Marimuthu, Apr 22 '15 at 11:13
http://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example — Arun P Johny, Apr 22 '15 at 11:13
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Closures#Creating_closures_in_loops.3A_A_common_mistake — Arun P Johny, Apr 22 '15 at 11:13
Thank you very much for all your help. I couldn't get my head around the fact that inner part is acting a bit separately. — Buzzzzzzz, Apr 22 '15 at 13:26

score 3 · Answer 1 · answered Apr 22 '15 at 11:13

By the time the timeout runs, the for loop has finished, and i is 6, that's why you're getting the output you see. You need to capture i during the loop:

for (var i=1; i<=5 ; i++) {
    (function(innerI) {
        setTimeout(function() {
            console.log("i: " + innerI);
        }, innerI*1000);
    })(i);
}

This creates an inner function with it's own parameter (innerI), that gets invoked immediately and so captures the value of i for use within the timeout.

Andy · Answer 2 · 2015-04-22T11:24:03.560

2

If you didn't want the complex-looking IIFE as explained in James' answer, you can also separate out the function using bind:

function count(i) {
    console.log("i: " + i);
}

for (var i = 1; i <= 5; i++) {
    setTimeout(count.bind(this, i), i * 1000);
}

edited Apr 22 '15 at 11:24

answered Apr 22 '15 at 11:20

Andy

61,948
13
68
95

2

This will also avoid the likes of jslint complaining about creating functions inside loops. – James Thorpe Apr 22 '15 at 11:20

score 0 · Answer 3 · answered Apr 23 '15 at 13:56

0

Thank you for you help, I found out another solution and it was a minor change.

On the top of the page I turned on the strict mode and also in the for loop, Instead of var, I used the "let" keyword.

answered Apr 23 '15 at 13:56

Buzzzzzzz

1,074
13
17

JavaScript closure loop issue in set time out

3 Answers3

Linked

Related