如何设置 setInterval 函数以处理每个单独的元素

Question

感谢您花时间审阅此问题。

我试图在短暂休息后分别显示每个图像，但似乎 setTimeout 或 setInterval 在这里不是一个好工具，但是，我用谷歌搜索了所有可用的工具，但显然这两个是唯一可用的。我不能使用它们，因为它们会堆叠函数调用并一次显示所有元素。那么，我需要清除那些不是我期望我的函数做的冗余元素。

我有以下代码：

imagesToShow = document.getElementsByClassName("image-to-show");
let revealing;
console.log(imagesToShow);
for (const iterator of imagesToShow) {
  iterator.classList.add("isHidden");
}
const fadeIn = setTimeout(() => {
  for (const iterator of imagesToShow) {
    iterator.classList.remove("isHidden");
  }
}, 500);

.isHidden {
  display: none;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="./Style/style.css" />
    <script src="./script/script.js" defer></script>
    <title>Banners</title>
    <style>
      .image-to-show {
        width: 400px;
        height: 400px;
      }

      .images-wrapper {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
      }
      .button-wrapper {
        height: 300px;
        margin-top: 100px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .slide-stop,
      .slide-start {
        outline: none;
        border-radius: 50%;
        width: 100px;
        height: 100px;
        margin-right: 30px;
      }
    </style>
  </head>
  <body>
    <div class="images-wrapper">
      <img src="./img/1.jpg" alt="image of game" class="image-to-show" />
      <img src="./img/2.jpg" alt="image of game" class="image-to-show" />
      <img src="./img/3.JPG" alt="image of game" class="image-to-show" />
      <img src="./img/4.png" alt="image of game" class="image-to-show" />
    </div>
    <div class="button-wrapper">
      <button class="slide-start">Start slideshow</button>
      <button class="slide-stop">Stop slideshow</button>
    </div>
  </body>
</html>

您能否建议如何确保它适用于每个元素，或者是否有替代方案，例如 C# 中的“睡眠”。我需要显示每个元素，但它无法正常工作。

Answer 1

按照您编写代码的方式，您实际上是在等待 500 毫秒，然后一次显示所有图像。

您可以像这样设置显示每张图片的超时时间：

for (const i in imagesToShow) {
  setTimeout(() => imagesToShow[i].classList.remove("isHidden"), i * 500);
}

i * 500 将显示 0ms 之后的第一张图片，500ms 之后的第二张图片，1000ms 之后的第三张图片，等等

如何设置 setInterval 函数以处理每个单独的元素

How to set setInterval function to work with each separate element

html

javascript

css

settimeout

setinterval