javascript - Accessing mutable variable in an event closure - Stack Overflow

admin管理员组

文章数量:1332345

I am trying to use the mousetrap Javascript plugin to handle some key strokes in a similar fashion, so I thought to code them up as follows:

    var keys = [ 'b', 'i', 'u'];
    for (var i=0; i < 3; ++i) {
        var iKey = keys[i];
        var iKeyUpper = iKey.toUpperCase();

        Mousetrap.bind(
            [   'mand+' + iKey,
                'mand+' + iKeyUpper,
                'ctrl+' + iKey,
                'ctrl+' + iKeyUpper],
            ( function( e ) {
                console.log( "you clicked: " + i );
        } ) );

    }

But, obviously, i is mutable. However, I am not sure how to write a closure where I am peting the event parameter in the response. Suggestions on how to handle this situation?

I am trying to use the mousetrap Javascript plugin to handle some key strokes in a similar fashion, so I thought to code them up as follows:

    var keys = [ 'b', 'i', 'u'];
    for (var i=0; i < 3; ++i) {
        var iKey = keys[i];
        var iKeyUpper = iKey.toUpperCase();

        Mousetrap.bind(
            [   'mand+' + iKey,
                'mand+' + iKeyUpper,
                'ctrl+' + iKey,
                'ctrl+' + iKeyUpper],
            ( function( e ) {
                console.log( "you clicked: " + i );
        } ) );

    }

But, obviously, i is mutable. However, I am not sure how to write a closure where I am peting the event parameter in the response. Suggestions on how to handle this situation?

• javascript
• closures
• dom-events
• mousetrap

Share Improve this question Follow edited Sep 5, 2020 at 9:24 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Jun 20, 2013 at 15:45 jedierikbjedierikb 13.1k2424 gold badges101101 silver badges171171 bronze badges 2

• you want to use the event in the attribute handler? I did not understand well "peting" in this context sorry. – Edorka Commented Jun 20, 2013 at 15:52
• Show us what you have tried. What was the problem with the event parameter? The closure IEFE should return the handler function which accepts the e parameter. – Bergi Commented Jun 20, 2013 at 16:37

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

how to write a closure where I am peting the event parameter in the response

Use a closure either around the whole loop body (as @dandavis) demonstrated), or use it only around the handler:

…
    Mousetrap.bind(
        [   'mand+' + iKey,
            'mand+' + 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
    );

you need to wrap the i variable in a local scope so that it won't sync with the "i" in the for loop:

   var keys = [ 'b', 'i', 'u'];
    for (var i=0; i < 3; ++i) {
      (function(i){
        var iKey = keys[i];
        var iKeyUpper = iKey.toUpperCase();

        Mousetrap.bind(
            [   'mand+' + iKey,
                'mand+' + iKeyUpper,
                'ctrl+' + iKey,
                'ctrl+' + iKeyUpper],
            ( function( e ) {
                console.log( "you clicked: " + i );
        } ) );
      }(i));
    }

the other alternative is to use functional Array methods, which since they use functions, always have their own scope, and they provide the element value and element index to you intrinsically:

 var keys = [ 'b', 'i', 'u'];
   keys.map(function(iKey, i){
        var iKeyUpper = iKey.toUpperCase();

        Mousetrap.bind(
            [   'mand+' + iKey,
                'mand+' + iKeyUpper,
                'ctrl+' + iKey,
                'ctrl+' + iKeyUpper],
            function( e ) {
                console.log( "you clicked: " + i );
        }); // end bind()    

   }); // end map()

the 2nd example will work out of the box in IE9+, but you can make it work anywhere with a simple drop-in Array method pat pack, usually included in IE shims...

本文标签： javascriptAccessing mutable variable in an event closureStack Overflow