Why the second (i) in the loop/in the timer wasn't immediately 6?

Question

https://code.sololearn.com/W5LzbrgVsFrw/?ref=app

Answer 1

You need to know how setTimeout works and how the value of i comes from the function's context to understand why only 6 is printed by the following code:
for(var i = 1; i<= 5; i++){

setTimeout(function(){
console.log(i)
}, i*1000) //why this (i) wasn't 6 immediately
}

When i = 1, this runs:
setTimeout(function(){
console.log(i)
}, 1000) // The i * 1000 expression evaluates immediately to 1000 but the function isn't run right away.
When i = 2, this runs again:
setTimeout(function(){
console.log(i)
}, i * 1000) // The i * 1000 expression evaluates immediately to 2000 but the function still isn't run.
i then goes through 3, 4, 5 in a similar way.
The for-loop exits after i becomes 6 and fails the loop condition. This will be less than 1 millisecond after the loop began at i = 1 because the loop finishes as fast as possible and computers are very fast.

Almost 1 second later, it runs
function(){
console.log(i)
}
At this point, i = 6 so 6 is printed.

Answer 2

If you just want to console.log the values without delay, use 0 as your setTimeout interval instead of i*1000. Even with an interval of 0, your function won't be called until the loop finishes. setTimeout always queues up the calls for later. With an interval of 0, it'll just be as soon as possible after your loop finishes.

Answer 3

All 5 times it prints, i is 6. This is because it never changes values in your anonymous function. The for-loop is the only code that changes the value of i and that runs before any of your anonymous functions.

If you run this code, it'll print 6, 7, 8, 9, 10 because the timeout function is changing the value of i:
for(var i = 1; i<= 5; i++){

setTimeout(function(){
console.log(i)
i++;
}, i*1000) //why this (i) wasn't 6 immediately
}

Answer 4

Josh Greig thank you so much i really appreciate ur effort, but i was asking about the second (i), it had to be (6) not (12345)

Answer 5

I guess it went through the process of incrementing (i) because it was implemented inside the loop, unlike the the setTimeout which was invoked later outside the loop.