为什么循环中的点击处理程序会表现出意外的行为？

循环中点击处理程序的正确闭包管理

问题：

将点击处理程序分配给循环中的多个元素可以导致意外的行为。具体来说，点击特定元素可能会触发与该元素无关的动作。这个问题的根本原因是什么？

解释：

在循环中使用闭包时会出现问题。当在循环内创建闭包时，它保留对循环变量的引用。在本例中，该变量是 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中文网其他相关文章！