為什麼循環中的點擊處理程序會表現出意外的行為？

循環中點擊處理程序的正確閉包管理

問題：

將處理程序分配給循環中點擊的多個元素可以導致意外的行為。具體來說，點擊特定元素可能會觸發與該元素無關的動作。這個問題的根本原因是什麼？

解釋：

循環中使用閉包時會出現問題。當在循環內建立閉包時，它保留對循環變數的參考。在本例中，該變數是 i。然而，隨著循環的進行，i 會隨著每次迭代而更新。因此，當執行單擊處理程序時，它使用 i 的最終值（在本例中為 20），無論實際單擊了哪個元素。

解決方案：

為了解決這個問題，可以使用回呼函數為每個點擊處理程序建立一個新的閉包。這確保每個處理程序都有自己對循環變數的唯一引用。

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

在循環內，可以將此回呼函數指派給每個點擊處理程序，為每個元素保留正確的 i 值。

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

ES6 中的現代替代方案：

ES6 引入了 let 關鍵字，它允許對於區塊作用域變數。這意味著循環中的 i 變數將是該循環的本地變量，從而無需回調函數。

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

這種方法更簡潔、更易於閱讀，使其成為現代的首選JavaScript 開發。

以上是為什麼循環中的點擊處理程序會表現出意外的行為？的詳細內容。更多資訊請關注PHP中文網其他相關文章！