on a website i want to do this: (simplified)
myHandlers = new Array();
for(var i = 0; i < 7; i++) {
myHandlers.push(new Handler({
handlerName: 'myHandler'+i, // works, e.g. ->myHandler1, 2, 3 etc.
handlerFunc: function(bla) { /*...*/ alert(i); } // doesn't work,all return 7
}
}
I could set the counter as another attribute of my Handler (which would copy the current value) and use it inside my function, but I guess, there is also a way to actually copy this value, no?
When handlerFunc is called, the
i
inside the function refers to thei
of thefor
loop. But thati
does probably not have the same value any more.Use a closure to bind the current value of
i
in the scope of an anonymous function:Here an anonymous function
(function(i) { … })(i)
is used and called immediately. This function binds the value ofi
of thefor
loop to the locali
. Thati
is then independent from thei
of thefor
loop.Use a closure to bind the
i
so the value stays intactIn your example,
i
in the functions is the same variable asi
outside the functions. Asi
is incremented in the loop, so is it incremented within the functions. As a result, if the functions are called after the loop has finished, they will all alert "7".You need to create a new variable with appropriate scope and copy the value of
i
into it.Something like this would create the desired effect.