在 JavaScript 循环中分配点击处理程序时如何避免闭包问题？-js教程-PHP中文网

在 JavaScript 循环中分配点击处理程序时如何避免闭包问题？

Patricia Arquette

发布： 2024-12-01 07:16:21

原创

956 人浏览过

How Can I Avoid Closure Issues When Assigning Click Handlers in JavaScript Loops?

解决循环内单击处理程序分配中的闭包问题

将单击处理程序分配给循环中的多个元素时，由于 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中文网其他相关文章！