在事件闭包中访问可变变量

时间:2013-06-20 15:45:05

标签: javascript javascript-events closures mousetrap

我正在尝试使用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是可变的。但是,我不知道如何编写一个闭包,我在响应中竞争事件参数。关于如何处理这种情况的建议?

2 个答案:

答案 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垫片中......