javascript - 如何无限次运行 setTimeOut？

Question

我已经广泛搜索了相同的内容，但没有一个解决方案有效，所以在这里提问

我想在循环中更改背景图像 [基本上更改元素的类]。但对我来说真正棘手的部分 [刚接触 JavaScript] 是 setTimeOut 在固定次数后停止。这是代码:

function addHomeInnerClass(selector, imageNumber = 0) {

imageNumber += 1;
  if (imageNumber === 1) {
    selector.classList.add('home-content-1');
  }

  if (imageNumber === 2) {
    selector.classList.add('home-content-2');
  }

  if (imageNumber === 3) {
    selector.classList.add('home-content-3');
  }

  if (imageNumber === 4) {
    selector.classList.add('home-content-4');
    imageNumber = 0;
  }

  setTimeout(() => addHomeInnerClass(selector, imageNumber), 1000);
}

document.addEventListener('DOMContentLoaded', function() {
  const homeInner = document.querySelector('.home-inner');

  addHomeInnerClass(homeInner, 0);

});

这是我的 HTML 部分:

<section class="home" id="home">
    <div class="home-inner">

    </div>
</section>

这是我的 CSS3:

.home {
    background-image: linear-gradient(to right, #ff5517 0%, #ff7000 40%, #db1d5e 80%);
    height: 88.98vh;

    .home-content-1 {
      height: 98%;
      border-bottom-right-radius: 20rem;
      background: linear-gradient(to right, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.3) 40%, rgba(0, 0, 0, 0.9) 80%), url("/app/assets/images/slider/ (2).jpg") no-repeat center center/cover;
      z-index: 1;
    }

    .home-content-2 {
      height: 98%;
      border-bottom-right-radius: 20rem;
      background: linear-gradient(to right, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.3) 40%, rgba(0, 0, 0, 0.9) 80%), url("/app/assets/images/slider/ (3).jpg") no-repeat center center/cover;
      z-index: 1;
    }

    .home-content-3 {
      height: 98%;
      border-bottom-right-radius: 20rem;
      background: linear-gradient(to right, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.3) 40%, rgba(0, 0, 0, 0.9) 80%), url("/app/assets/images/slider/(4).jpg") no-repeat center center/cover;
      z-index: 1;
    }

    .home-content-4 {
      height: 98%;
      border-bottom-right-radius: 20rem;
      background: linear-gradient(to right, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.3) 40%, rgba(0, 0, 0, 0.9) 80%), url("/app/assets/images/slider/ (1).jpg") no-repeat center center/cover;
      z-index: 1;
    }
  }

我知道 CSS 和 HTML 代码在这里无关紧要，但如果我能找到其他方法来做我想做的事，那就太好了。

我想做什么？使用纯javascript来获得淡入淡出的图像效果。

我卡在哪里了？不知道如何无限次运行 setTimeOut？

注意:我不想使用任何第三方库。这是一个学习元素。

Answer 1

正如我 said in a comment ，问题不在于计时器停止运行。这是因为您在添加新类时并没有删除旧类。以下是如何在简化代码的同时做到这一点:

function addHomeInnerClass(selector, imageNumber = 0) {

  selector.classList.remove('home-content-' + imageNumber);
  imageNumber = imageNumber % 4 + 1;
  selector.classList.add('home-content-' + imageNumber);

  setTimeout(() => addHomeInnerClass(selector, imageNumber), 1000);
}

实例(我稍微修改了 CSS 以便于查看更改；我还在 .home 规则之后添加了缺少的 }):

function addHomeInnerClass(selector, imageNumber = 0) {

  selector.classList.remove('home-content-' + imageNumber);
  imageNumber = imageNumber % 4 + 1;
  selector.classList.add('home-content-' + imageNumber);

  setTimeout(() => addHomeInnerClass(selector, imageNumber), 1000);
}

document.addEventListener('DOMContentLoaded', function() {
  const homeInner = document.querySelector('.home-inner');

  addHomeInnerClass(homeInner, 0);

});

.home {
    height: 88.98vh;
}
    .home-content-1 {
      height: 98%;
      border-bottom-right-radius: 20rem;
      background: url("https://via.placeholder.com/100/0000C0/FFFFFF?text=1") no-repeat center center/cover;
      z-index: 1;
    }

    .home-content-2 {
      height: 98%;
      border-bottom-right-radius: 20rem;
      background: url("https://via.placeholder.com/100/0000C0/FFFFFF?text=2") no-repeat center center/cover;
      z-index: 1;
    }

    .home-content-3 {
      height: 98%;
      border-bottom-right-radius: 20rem;
      background: url("https://via.placeholder.com/100/0000C0/FFFFFF?text=3") no-repeat center center/cover;
      z-index: 1;
    }

    .home-content-4 {
      height: 98%;
      border-bottom-right-radius: 20rem;
      background:  url("https://via.placeholder.com/100/0000C0/FFFFFF?text=4") no-repeat center center/cover;
      z-index: 1;
    }
  }

<section class="home" id="home">
    <div class="home-inner">

    </div>
</section>