我有一个循环,我在其中为一个事件定义了一个闭包:
for (var i = 0; i < 3; i++) {
obj.onload = function(e) {
me.myFunction(e, i);
};
}
我需要将该计数器变量传递给触发 load
事件时调用的函数。我总是传递相同的值。
如何将正确的计数器值传递给函数?
最佳答案
解决此问题的通常方法是使用构建器函数,以便处理程序关闭不会更改的内容:
function buildHandler(index) {
return function(e) {
me.myFunction(e, index);
};
}
for (var i = 0; i < 3; i++) {
obj.onload = buildHandler(i);
}
您可以使用立即调用的函数表达式 (IIFE) 来做到这一点,但在理论上它会在每个循环中创建和丢弃一个函数(我希望大多数 JavaScript现在的引擎对此进行了优化),至少我认为它更难阅读:
for (var i = 0; i < 3; i++) {
obj.onload = (function(index) {
return function(e) {
me.myFunction(e, index);
};
})(i);
}
有一个 ES5 特性,Function#bind
,如果你想直接使用 me.myFunction
,你可以使用它,但是你必须改变顺序您期待的参数(首先是 index
,然后是 事件):
for (var i = 0; i < 3; i++) {
obj.onload = me.myFunction.bind(me, i);
}
bind
创建一个函数,该函数在被调用时调用原始函数,并将 this
设置为第一个参数(因此,上面的 me
) ,然后是您给它的任何其他参数,然后是调用该函数时使用的任何参数。 (这就是为什么 myFunction
期望它们必须更改为 index, e
而不是 e, i
的原因。)
在旧版浏览器上,您需要为 Function#bind
填充一个 shim。
关于javascript - 在事件触发时将变量传递给闭包,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19433596/