Loops and closures
Consider the following example of using functions inside loops:
for (var i=1; i<=5; i++) { setTimeout( function delay(){ console.log( i ); }, i*100); }
This snippet should print 1
, 2
, 3
, 4
, and 5
on the console at an interval of 100 ms, right? Instead, it prints 6
, 6
, 6
, 6
, and 6
at an interval of 100 ms. Why is this happening? Here, we encounter a common issue with closures and looping. The i
variable is being updated after the function is bound. This means that every bound function handler will always print the last value stored in i
. In fact, the timeout function callbacks are running after the completion of the loop. This is such a common problem that JSLint will warn you if you try to use functions this way inside a loop. ...
Get JavaScript: Moving to ES2015 now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.