Javascript 为什么将警报放在for循环的setTimeout内会中断警报？

我有一个非常简单的

脚本

，它应该用和

id=“d”

抓住每个元素，然后遍历这些元素；获取其

数据颜色的值

每次循环时，它都应该将

文档的背景更改为这些值，然后警告该值

它将工作，并获取所有的值，并输出它们；一个接一个。但是，由于警报太快，页面无法实际更改
背景
颜色，我必须将警报放在
设置超时
内，以便
文档
可以更改颜色，等待250毫秒，然后发出警报值。但当我这样做时，它只会获取最后一个元素
数据颜色
值并提醒它

这是我的JavaScript：

var selector = document.querySelectorAll("#d");

for(var i = 0; i < selector.length; i++){
    var did = selector[i].getAttribute("data-color");

    document.body.style.background = did; // set background to data-color value
    setTimeout(function(){ // wait 250 milliseconds (this is where it breaks)
        alert(did); // THEN alert the value of data-color
    }, 250);
}

var选择器=document.queryselectoral（“#d”）；
对于（变量i=0；i

以及HTML：

<div data-color="green" id="d"></div>
<div data-color="blue" id="d"></div>
<div data-color="red" id="d"></div>



为什么会发生这种情况？谢谢。
我更改了
类的
id
s
es-还更改了
设置超时时间的
setInterval

我不确定这是否是期望的结果，但也许您可以让我更准确地知道期望的结果是什么：）

见下面的演示


var选择器=document.querySelectorAll（“.d”）；
变量i=0；//用于遍历元素数组的索引
//等待2000毫秒（2秒）
var intervalHandle=setInterval（函数（）{
var did=selector[i].getAttribute（“数据颜色”）；
//将背景设置为数据颜色值
document.body.style.background=did；
//然后记录数据颜色的值
console.log（did）；
//如果数组中有更多项，则增加索引以便
//下一个间隔将使用数组中的下一个元素
如果（i<选择器长度-1）{
i++；
}否则{
//否则，清除间隔以停止
clearInterval（间隔句柄）；
}
},  2 * 1000); // 2秒

id必须是唯一的。此外，所有超时都将同时运行，因为它们都在同一时间启动。最后，在超时运行时，警报中的
did
将始终具有其最后一个值。@torazaburo但是，当我删除
setTimeout
时，它已经起作用了？所以它一定不是与
id
有关，而是与超时有关？那它不应该只是重复绿色吗？。。如果这听起来有点愚蠢，我深表歉意，但我对JavaScription非常陌生，它需要超过250毫秒的时间来解除警报，因此我不确定这是否会得到所需的输出-只记录颜色变化如何哦，
id
s的问题不会导致这种情况，但这是另一个编码标准/有效性问题（它们应该是唯一的；您可以将它们改为类）@ochi-ohh好的：-）我没有意识到这一点。我一直在使用
id
，因为一些元素是通过
PHP
过程生成的，所以我无法更改
类或
id
s@OlegEstekhin也许还有另一个答案，但仅仅因为有，并不意味着我理解它。因此，我提出了一个问题。谢谢！：-）只是设置超时，但是，只希望它运行once@Caelan. 现在，我在数组中的所有元素都被“处理”后清除间隔