如何設定setInterval函式以處理每個單獨的元素-有解無憂

感謝您抽出寶貴時間查看此問題。

我試圖在短暫休息后分別顯示每個影像，但似乎 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# 中可能有像“睡眠”這樣的替代方法。我需要顯示每個元素，但它不能正常作業。

uj5u.com熱心網友回復：

按照您的代碼撰寫方式，您實際上是在等待 500 毫秒，然后一次顯示所有影像。

您可以設定超時以顯示每個影像，如下所示：

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

在i * 500將顯示后的第一影像0ms，第二個之后500ms，第三后1000ms，等

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/385328.html

標籤：javascript html css 设置超时设置间隔

上一篇：何時在React中使用CSS和JSX樣式

下一篇：如何將導航欄與標題行內