truy cập vào biến có thể thay đổi trong một kết thúc sự kiện

Question

Tôi cố gắng để sử dụng mousetrap Plugin javascript để xử lý một số nét chính trong một thời trang tương tự, vì vậy tôi nghĩ mã chúng như sau:

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

    } 

Nhưng, rõ ràng, i có thể thay đổi. Tuy nhiên, tôi không chắc chắn làm thế nào để viết một đóng cửa, nơi tôi đang cạnh tranh tham số sự kiện trong phản ứng. Gợi ý về cách xử lý tình huống này?

Answer 1

làm thế nào để viết một đóng cửa nơi tôi đang cạnh tranh tham số sự kiện trong phản ứng

Sử dụng một đóng cửa hoặc xung quanh cơ thể toàn bộ vòng lặp (như @dandavis) đã chứng minh), hoặc sử dụng nó chỉ khoảng người xử lý:

… 
    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

bạn cần phải quấn biến i trong một phạm vi địa phương do đó nó sẽ không đồng bộ với "i" trong vòng lặp 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)); 
    } 

thay thế khác là sử dụng phương pháp mảng chức năng, trong đó kể từ khi họ sử dụng các chức năng, luôn luôn có phạm vi riêng của họ, và họ cung cấp các giá trị phần tử và chỉ số yếu tố để bạn về bản chất:

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

ví dụ thứ 2 sẽ làm việc ra khỏi hộp trong IE9 +, nhưng bạn có thể làm cho nó hoạt bất cứ nơi nào với một gói compat phương thức Array thả đơn giản, thường được bao gồm trong IE shims .. .