jQuery each（）循环中的setInterval

Question

我想我在这里犯了一个愚蠢的错误，但我没有看到它。我试图获取＆lt; li＆gt;的列表并使用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)

我在这里做错了什么？这是范围的事吗？

Answer 1

这是“你忘了宣称'按钮'作为局部变量”的事情。

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

如果没有，变量为全局。

Answer 2

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

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

您正在使用变量＆＃34;按钮＆＃34;作为一个全局变量，它只有一个实例。这意味着它只有一个值。你可能想要的是：

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

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