Running the following code:
for (var i=0; i<3; i++) {
setTimeout( function() { console.log(i); } , 500 );
}
Outputs "3" three times. It's outputting the final value of i
as opposed to the value of i
when the inner function is created.
If I want the output to be 1, 2, and 3, how would I write this code? How can I get it to use the value of i
at the time the function is defined as opposed to its final value?
Answer
for (var i=0; i<3; i++) {
setTimeout( function(val) { return function() { console.log(val); } }(i), 500 );
}
So, at setTimeout
time (at the time we define the function for setTimeout
), we're calling the anonymous function taking val
as a parameter. This creates a closure for each function call, storing the value of val
within the scope of the function we just called. I used a self-invoking function, which creates an immediate closure.
In the code you provided, the code creates a closure, but for the larger scope of the entirety of the code, so i
is local to the whole code, meaning that at run-time, the anonymous function will use the variable i
that the rest of the code uses.
No comments:
Post a Comment