jQuery each() 循环中的 setInterval答案

【问题标题】：setInterval in a jQuery each() loopjQuery each() 循环中的 setInterval
【发布时间】：2014-11-04 01:10:33
【问题描述】：

我认为我在这里犯了一个愚蠢的错误，但我没有看到。我正在尝试获取

的列表并使用 setInterval 对它们中的每一个进行操作，但 setInterval 的行为与我预期的不同。

我的标记片段：

<ul>
  <li id="thing1"></li>
  <li id="thing2"></li>
  <li id="thing3"></li>
</ul>

我的 Javascript 代码片段：

$("ul li").each(function(){
  button = $(this).attr("id");
  setInterval(function(){console.log(button);}, 500);
});

我希望/期望控制台输出是什么：

thing1
thing2
thing3
(repeating 500ms)

但我实际得到的是：

thing1
thing1
thing1
(repeating 500ms)

我在这里做错了什么？是作用域吗？

【问题讨论】：

【解决方案1】：

在你这里重复的代码片段中：

$("ul li").each(function(){
  button = $(this).attr("id");
  setInterval(function(){console.log(button);}, 500);
});

您正在使用变量“button”作为全局变量，并且它只有一个实例。这意味着它将只有一个值。你可能想要的是：

$("ul li").each(function(){
  var button = $(this).attr("id");
  setInterval(function(){console.log(button);}, 500);
});

这将为您的 each() 回调函数创建一个局部变量，该变量将在您的 setInterval() 回调函数的闭包范围内。

【讨论】：

【解决方案2】：

这是“您忘记将 'button' 声明为局部变量”的事情。

var button = $(this).attr("id");

没有它，变量是全局的。

【讨论】：