Zugriff auf änderbare Variable in einer Ereignis Schließung

Question

Ich versuche, das mousetrap JavaScript-Plugin zu verwenden, um einige Tastenanschläge in ähnlicher Weise zu handhaben, so dass ich dachte, sie codieren wie folgt zusammen:

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); 
     })); 

    } 

Aber natürlich, i ist veränderbar. Ich bin mir jedoch nicht sicher, wie ich einen Abschluss schreiben soll, bei dem ich den Event-Parameter in der Antwort konkurriere. Vorschläge zum Umgang mit dieser Situation?

Answer 1

wie einen Verschluss zu schreiben, wo ich den Ereignisparameter

Verwenden Sie einen Verschluss entweder um den gesamten Schleifenkörper (wie @dandavis) gezeigt), oder verwenden Sie es nur um in der Antwort am Wettbewerb Der Handler:

… 
    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 
    ); 

Answer 2

müssen Sie die Variable i in einem lokalen Bereich wickeln, so dass es nicht mit der Synchronisierung „i“ in dem for-Schleife:

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)); 
    } 

die andere Alternative ist funktional Array Methoden zu verwenden, die da sie Funktionen nutzen, immer ihre eigenen Umfang haben, und sie bieten das Element Wert und Elementindex Ihnen eigen:

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() 

das zweite Beispiel der Box funktionieren in IE9 + wird, aber man kann es überall arbeiten mit einem einfachen Drop-in-Array-Verfahren compat pack, normalerweise in IE-Shims enthalten. .