dostępu zmiennej zmienny w zamknięciu zdarzeń

Question

Próbuję użyć mousetrap javascript plugin do obsługi niektórych podstawowych uderzeń w podobny sposób, więc pomyślałem, aby zakodować je w następujący sposób:

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

    } 

Ale, oczywiście, i jest zmienna. Jednak nie jestem pewien, jak napisać zamknięcie, w którym rywalizuję parametr zdarzenia w odpowiedzi. Sugestie dotyczące radzenia sobie z tą sytuacją?

Answer 1

jak napisać zamknięcie gdzie jestem konkurencyjne parametry zdarzenia w odpowiedzi

Użyj zamknięcie albo po całym ciele pętli (jak @dandavis) wykazali) lub używać go tylko około przewodnik:

… 
    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

trzeba owinąć zmienną I w zakresie lokalnym, tak że nie będą synchronizowane z „ja” w pętli for:

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

drugą alternatywą jest wykorzystanie funkcjonalnych metod tablicy, która ponieważ korzystanie z funkcji, zawsze mają swój własny zakres, a stanowią one wartość elementu i indeks elementu wam wewnętrznie:

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

2nd przykładem będzie działać po wyjęciu z pudełka w IE9 +, ale można zrobić to działa wszędzie z prostym włożeniem pakietu kompatybilnego z metodą Array, zwykle zawartego w podkładkach IE. .