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

【问题标题】：How to set setInterval function to work with each separate element如何设置 setInterval 函数以处理每个单独的元素
【发布时间】：2022-01-21 04:39:35
【问题描述】：

感谢您抽出宝贵时间查看此问题。

我试图在短暂休息后分别显示每个图像，但似乎 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# 中可能存在类似“睡眠”的替代方法。我需要显示每个元素，但它不能正常工作。

【问题讨论】：

不，对不起，我做到了，就像我试图解决问题的方式一样。我试图更改 setInterval 的位置或将其放在函数内部。我包含的代码是最后一个仍然无法工作的版本。这就是我提出这个问题的原因，因为我尽我所能，但由于它的性质，仍然 setInterval 或 setTimeout 不起作用。

标签： javascript html css settimeout setinterval

【解决方案1】：

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

您可以设置一个超时来显示每张图片，如下所示：

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

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

【讨论】：

你知道为什么它会一次显示所有图像吗？我就是这么想的。我有一个从集合中提取元素的循环，然后它将这个元素传递给一个等待 500 毫秒的函数，然后它会执行函数的主体，然后循环再次提取第二个元素，依此类推。不知道为什么它不能以这种方式工作。实际发生了什么。它接受第一个元素，将其保存在内存中，然后是第二个元素，依此类推，然后它立即为所有项目执行函数体，这很奇怪，因为超时应该适用于该函数的每次调用，为什么不呢？
我想我对这个函数的理解有些缺陷。那么它做了什么。它将记录第一次通话，如果... 500 毫秒通过，它将做什么？一次显示所有元素而无需暂停？
@Andriy Ivanchenko 您的函数一次显示所有图像，因为这就是 setTimeout 的功能。 setTimeout(() => (alert("Hello")), 5000) 将在 5 秒后提示“Hello”一次。无论您在 set timeout 内有什么回调，都将在指定时间后执行一次。嵌套超时可以在这里解决您的问题。嵌套超时比 setInterval 更准确。以let timerId = setTimeout ( function tick(){ alert("Hello World"); timerId = setTimeout(tick, 2000);}, 2000); 为例，它会在每 2 秒后提示“Hello World”。