在 JavaScript 循環中分配點擊處理程序時如何避免閉包問題？

解決循環內單擊處理程序分配中的閉包問題

將單擊處理程序分配給循環中的多個元素時，由於JavaScript 中的閉包，會出現一個常見的陷阱。提供的程式碼顯示了此問題：

$(document).ready(function(){
  for(var i = 0; i < 20; i++) {
    $('#question' + i).click( function(){
      alert('you clicked ' + i);
    });
  }
});

此程式碼旨在在發生點擊時顯示被點擊元素的索引。但是，每次點擊它都會錯誤地顯示“您點擊了 20”，而不是顯示實際索引。此行為源自於循環中所建立的閉包。

解決方案：使用回調函數

要解決此問題，我們可以使用回調函數，如下所示：

function createCallback( i ){
  return function(){
    alert('you clicked' + i);
  }
}

$(document).ready(function(){
  for(var i = 0; i < 20; i++) {
    $('#question' + i).click( createCallback( i ) );
  }
});

在此更新版本中，在循環內創建回調函數。此函數捕獲“i”的當前值，並確保單擊元素時顯示正確的索引。

利用ES6 的let 關鍵字

如果ES6 語法可用，我們可以使用let 關鍵字可以更簡潔地實現相同的結果：

for(let i = 0; i < 20; i++) {
  $('#question' + i).click( function(){
    alert('you clicked ' + i);
  });
}

let 關鍵字確保'i' 的作用域是本地的循環，避免關閉問題並在每個元素啟動時顯示正確的點擊索引。

以上是在 JavaScript 循環中分配點擊處理程序時如何避免閉包問題？的詳細內容。更多資訊請關注PHP中文網其他相關文章！