如何使我的循环与 setTimeout 一起工作？

Question

changeColor 正在另一个函数中被调用。我试过这个没有循环，它工作得很好。问题是它只会显示在一个盒子上。我试图让它显示在每个盒子上，但我遇到了死胡同。我试过if和else if，它不会循环。我的代码中缺少什么？为什么它忽略循环？

function changeColor() {

    var flash = document.querySelector(".side1");

    for (var i = 0; i < flash.length; i++) {
        flash[i].style.backgroundColor = 'green'

            setTimeout(function () {
                flash[i].style.backgroundColor = 'yellow'
            }, 3000);


            setTimeout(function() {
                flash[i].style.backgroundColor = 'red'
            }, 10000);

    } 

}
setInterval(changeColor, 80000000);

Answer 1

document.querySelector 只返回第一个匹配项，而不是数组。 document.querySelectorAll 将返回一个包含所有匹配项的数组。

编辑 另外，正如@Drag13 在下面指出的那样，所有超时都将使用i 的最终值，而不是您第一次设置超时时的值。要解决此问题，您可以使用let i = 0 而不是var i = 0 将i 置于块范围内，这意味着该块内的所有代码都将存在当前值，包括您的setTimeout 回调。

Answer 2

正如其他人所指出的，document.querySelector 仅返回元素，而不是数组。您还有变量范围问题，可以使用let 来限制范围，但它是该语言相对较新的功能。如果兼容性是一个问题，您可能希望按照 Patrick Evans 的建议找到另一种解决方案，例如闭包。这是您在功能性 sn-p 中的示例。我加快了速度并修复了 Patrick Evans 在 cmets 中指出的范围界定问题。直到。

function changeColor() {
  var flash = document.querySelectorAll("div.flash")

  for (var i = 0; i < flash.length; i++) {
    flash[i].className = 'flash green'

    // create a closure which flashes yellow
    var flashYellow = (function() {
      var f = flash[i]
      return function() {
        f.className = 'flash yellow'
      }
    })()
    // create a closure which flashes red
    var flashRed = (function() {
      var f = flash[i]
      return function(){
        f.className = 'flash red'
      }
    })()

    setTimeout(flashYellow, 1000);
    setTimeout(flashRed, 2000);
  }
}
// change color immediately
changeColor();
// change color every three seconds after that
setInterval(changeColor, 3000);

div.flash {
  height: 25vh;
  width: 25vw;
}

div.green {
  background-color: green;
}

div.yellow {
  background-color: yellow;
}

div.red {
  background-color: red;
}

<div class="flash">text</div>
<div class="flash">other text</div>