setTimeout类列表添加/删除非常不稳定

问题描述

我想利用setTimeout()添加和删除类，但是在我当前的实现中，这种行为非常不稳定。见下文：

  let topBars = document.querySelectorAll(".bar");
  function clearClasses() {
    topBars.forEach((bar,i) => {
      topBars[i].classList.remove('active-bar')
    })
  }
  function cycleBars() {
    topBars.forEach((bar,i) => {
      setTimeout(() => {
        console.log("the index is: " + i)
        clearClasses()
        topBars[i].classList.add('active-bar')
      },i * 5000)
    })
  }
  if (topBars.length > 1) {
    setInterval(cycleBars,5000);
  }

  .active-bar {
    color: red;
    background-color: black;
  }

<div class="bar active-bar">FISRT</div>
<div class="bar">SECOND</div>
<div class="bar">THIRD</div>

这种行为无处不在，有时甚至有时在跳过。这个想法是让类基于延迟循环而下降，取而代之的是这里的https://travishorn.com/delaying-foreach-iterations-2ebd4b29ad30

这里出了什么问题，怎么似乎前后不一致？

解决方法

这是Scott Marcus在评论中提到的内容的实现：

let topBars = document.querySelectorAll(".bar");
let activeBarIndex = 0;
function cycleBars() {
  topBars[activeBarIndex].classList.remove('active-bar');
  ++activeBarIndex;
  if (activeBarIndex >= topBars.length) {
     activeBarIndex = 0;
  }
  topBars[activeBarIndex].classList.add('active-bar');
}

if (topBars.length > 1) {
  setInterval(cycleBars,5000);
}

  .active-bar {
    color: red;
    background-color: black;
  }

<div class="bar active-bar">FIRST</div>
<div class="bar">SECOND</div>
<div class="bar">THIRD</div>

setInterval（）导致每五秒钟调用一次cycleBars（）。

,

尝试在cycleBars函数中使用setTimeout，这应该可以为您提供解决方案。

如果将cycleBars中的setTimeouts延迟设置为1000ms，它将按预期运行。因此，如果在setInterval和setTimeout上设置了相同的延迟时间，则会连续触发两次，因此会跳过一些数字。

这里：

let delay = 15000;

let topBars = document.querySelectorAll(".bar");
  function clearClasses() {
    topBars.forEach((bar,i) => {
      topBars[i].classList.remove('active-bar')
    })
  }
  function cycleBars() {
    topBars.forEach((bar,i) => {
      setTimeout(() => {
        console.log("the index is: " + i)
        clearClasses()
        topBars[i].classList.add('active-bar')
      },i * (delay/topBars.length))
    })
  }
  if (topBars.length > 1) {
    setInterval(cycleBars,delay);
  }

理想情况下，您需要在变量中添加以毫秒为单位的延迟，并将该变量附加到setInterval和setTimeout延迟参数上