我正在尝试使用mousetrap javascript插件以类似的方式处理一些关键笔划,所以我想将它们编码如下:
var keys = [ 'b', 'i', 'u'];
for (var i=0; i < 3; ++i) {
var iKey = keys[i];
var iKeyUpper = iKey.toUpperCase();
Mousetrap.bind(
[ 'command+' + iKey,
'command+' + iKeyUpper,
'ctrl+' + iKey,
'ctrl+' + iKeyUpper],
( function( e ) {
console.log( "you clicked: " + i );
} ) );
}
但是,显然,i
是可变的。但是,我不知道如何编写一个闭包,我在响应中竞争事件参数。关于如何处理这种情况的建议?
答案 0 :(得分:5)
如何编写一个闭包,我在响应
中竞争事件参数
在整个循环体周围使用闭包(如@dandavis所示),或仅在处理程序周围使用它:
…
Mousetrap.bind(
[ 'command+' + iKey,
'command+' + iKeyUpper,
'ctrl+' + iKey,
'ctrl+' + iKeyUpper],
(function(_i) { // of course you can use the name `i` again
return function( e ) {
console.log( "you clicked: " + _i );
};
})(i) // and pass in the to-be-preserved values
);
答案 1 :(得分:4)
您需要将i变量包装在本地范围内,以便它不会与for循环中的“i”同步:
var keys = [ 'b', 'i', 'u'];
for (var i=0; i < 3; ++i) {
(function(i){
var iKey = keys[i];
var iKeyUpper = iKey.toUpperCase();
Mousetrap.bind(
[ 'command+' + iKey,
'command+' + iKeyUpper,
'ctrl+' + iKey,
'ctrl+' + iKeyUpper],
( function( e ) {
console.log( "you clicked: " + i );
} ) );
}(i));
}
另一种选择是使用函数数组方法,因为它们使用函数,总是有自己的范围,它们本质上为你提供元素值和元素索引:
var keys = [ 'b', 'i', 'u'];
keys.map(function(iKey, i){
var iKeyUpper = iKey.toUpperCase();
Mousetrap.bind(
[ 'command+' + iKey,
'command+' + iKeyUpper,
'ctrl+' + iKey,
'ctrl+' + iKeyUpper],
function( e ) {
console.log( "you clicked: " + i );
}); // end bind()
}); // end map()
第二个例子将在IE9 +中开箱即用,但你可以使用简单的插件阵列方法compat包在任何地方工作,通常包含在IE垫片中......