javascript - 为什么在 for 循环的 setTimeout 内放置警报会破坏警报？

Question

这个问题已经有答案了:

JavaScript closure inside loops – simple practical example (45 个回答)

已关闭 6 年前。

我有一个非常简单的script它应该用 and id="d" 来抓取每个元素，然后迭代每个元素；捕获他们data-color的值(value)。

每次循环时，都应该更改document的背景。到这些值，然后提醒该值。

它可以工作，获取所有值并输出它们；一个接一个地。但是，由于警报太快，页面无法实际更改 background颜色，我必须将警报放在 setTimeout 中这样document可以改变颜色，等待 250 毫秒，然后提醒该值。当我这样做时，它只会获得最后一个元素 data-color重视并提醒它。

这是我的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);
}

以及HTML:

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

为什么会发生这种情况？谢谢。

Answer 1

我更改了 classes 的 id - 还更改了 setInterval 的 setTimeout

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

请参阅下面的演示

var selector = document.querySelectorAll(".d");
var i = 0; // index for traversing the array of elements

// wait 2000 milliseconds (2 secs)
var intervalHandle  = setInterval(function() {
  var did = selector[i].getAttribute("data-color");
  // set background to data-color value
  document.body.style.background = did;
  // THEN log the value of data-color
  console.log(did);
  
  // if there are more items in the array, increment index so 
  // that next interval will use the next element in array
  if (i < selector.length-1) {
    i++;
  } else {
    //otherwise, clear the interval to stop
    clearInterval(intervalHandle);
  }

},  2 * 1000); // 2 secs

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