javascript - 普通 Javascript 循环函数选择 div 和添加/删除类的意外行为

Question

当我试图在网页上制作一个 javascript slider 时，我偶然发现了我的一个脚本的奇怪行为。也许你们中有人可以向我解释为什么会这样。

我要操作的 HTML/JS 是:

window.onload = function(){
  var services = document.getElementsByClassName('services');
  loop(0);

  function loop(i){
    if (i == 0){
      var previous = services.length - 1;
    } else {
      var previous = i - 1;
    }
    services[previous].classList.add('out-position');
    services[previous].classList.remove('active');
    services[i].classList.add('active');
    setInterval(() => services[previous].classList.remove('out-position'), 1000);
    i == services.length - 1 ? i = 0 : i ++;
    setInterval(() => loop(i), 6000);
  }
}

<div class="services">
  <div>
    <h2>Title</h2>
    <p class="subheading">Some text</p>
  </div>
  <div>
    <img src="<?= imgURL ?>" />
    <p class="description">Some random text for description</p>
  </div>
</div>

<div class="services">
  <div>
    <h2>Title</h2>
    <p class="subheading">Some text</p>
  </div>
  <div>
    <img src="<?= imgURL ?>" />
    <p class="description">Some random text for description</p>
  </div>
</div>

<div class="services">
  <div>
    <h2>Title</h2>
    <p class="subheading">Some text</p>
  </div>
  <div>
    <img src="<?= imgURL ?>" />
    <p class="description">Some random text for description</p>
  </div>
</div>

<div class="services">
  <div>
    <h2>Title</h2>
    <p class="subheading">Some text</p>
  </div>
  <div>
    <img src="<?= imgURL ?>" />
    <p class="description">Some random text for description</p>
  </div>
</div>

<div class="services">
  <div>
    <h2>Title</h2>
    <p class="subheading">Some text</p>
  </div>
  <div>
    <img src="<?= imgURL ?>" />
    <p class="description">Some random text for description</p>
  </div>
</div>

我有两个类可以玩； active 是我用来显示 div 的类，out-position 是我用来制作 div 的类向右滑动。所有动画都在我的 CSS 中定义。

乍一看似乎一切正常，但经过一些迭代后，我注意到我的 div 开始以一种奇怪的方式运行。查看我的开发工具，我可以看到在几次迭代之后我的脚本选择了比我认为应该更多的 div，并且在大约 15-20 次迭代之后简直是疯了，在每次迭代中选择所有 div 并随机添加/为他们删除类(class)。

我现在用纯 CSS 制作了我的 slider ，并且工作正常，但我真的很想从我的错误中吸取教训。那么，有人可以解释一下我在这个脚本中做错了什么吗？

谢谢!

Answer 1

这是@Pointy 评论后的解决方案，请随意改进它，它可以用于实现 slider 。

window.onload = function(){
  var services = document.getElementsByClassName('services');
  loop(0);

  function loop(i){
    if (i == 0){
      var previous = services.length - 1;
    } else {
      var previous = i - 1;
    }
    services[previous].classList.add('out-position');
    services[previous].classList.remove('active');
    services[i].classList.add('active');
    setTimeout(() => services[previous].classList.remove('out-position'), 1000);
    i == services.length - 1 ? i = 0 : i ++;
    setTimeout(() => loop(i), 3000);
  }
}

.active {
  color: green;
}

.out-position {
  color: red;
}

<div class="services">
  <div>
    <h2>Title 1</h2>
    <p class="subheading">Some text 1</p>
  </div>
  <div>
    <p class="description">Some random text for description 1</p>
  </div>
</div>

<div class="services">
  <div>
    <h2>Title 2</h2>
    <p class="subheading">Some text 2</p>
  </div>
  <div>
    <p class="description">Some random text for description 2</p>
  </div>
</div>

<div class="services">
  <div>
    <h2>Title 3</h2>
    <p class="subheading">Some text 3</p>
  </div>
  <div>
    <p class="description">Some random text for description 3</p>
  </div>
</div>

<div class="services">
  <div>
    <h2>Title 4</h2>
    <p class="subheading">Some text 4</p>
  </div>
  <div>
    <p class="description">Some random text for description 4</p>
  </div>
</div>

<div class="services">
  <div>
    <h2>Title 5</h2>
    <p class="subheading">Some text 5</p>
  </div>
  <div>
    <p class="description">Some random text for description 5</p>
  </div>
</div>