意外的vanilla Javascript循环函数行为选择div并添加/删除类

Question

在尝试在网页上制作javascript滑块时，我偶然发现了我的一个脚本的奇怪行为。也许你们中的某个人可以解释为什么会发生这种情况。

我操作的HTML / JS是：

＆＃13;

＆＃13;

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);
  }
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

我有两节课可以玩; active是我必须用来显示div的类，out-position是我必须用来使div向右滑动的类。所有动画都在我的CSS中定义。

一见钟情似乎一切正常，但经过一番迭代，我注意到我的div开始以一种奇怪的方式行事。看看我的开发工具，我可以看到经过几次迭代后，我的脚本选择了比我想象的更多的div，并且在15-20次迭代之后实际上变得疯狂，在每次迭代中选择所有div并随机添加/删除类。

我现在用纯CSS创建了我的滑块，工作正常，但我真的很想从错误中吸取教训。那么，有人可以解释一下我在这个剧本中做错了吗？

谢谢！

Answer 1

这是@Pointy评论后的解决方案，随时可以改进它，它可以用来实现一个滑块。

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>