如何设置 setInterval function 以使用每个单独的元素
[英]How to set setInterval function to work with each separate element
问题描述
thanks for your time reviewing this question.
感谢您花时间审查这个问题。
I am trying to display each image separately after a short break but seems like setTimeout or setInterval is not a good tool here, however, I googled all the available instruments but apparently these two are the only available.我试图在短暂休息后分别显示每个图像，但似乎 setTimeout 或 setInterval 在这里不是一个好工具，但是，我搜索了所有可用的工具，但显然这两个是唯一可用的。 I can't use them since they will stack the function calls and will display all the elements at once.我不能使用它们，因为它们会堆叠 function 调用并一次显示所有元素。 So then, I need to clear the redundant elements that is not what I expect my function to do.那么，我需要清除那些不是我希望我的 function 做的冗余元素。
I have the following code:我有以下代码：
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>
Could you please advise how to make sure it works with each element or maybe there is an alternative like "sleep" in C#.您能否建议如何确保它适用于每个元素，或者在 C# 中可能有类似“睡眠”的替代方法。 I need to display each and every element but it doesn't work correctly.我需要显示每个元素，但它不能正常工作。
1 个解决方案
解决方案1
0 已采纳 2021-12-18 20:58:24
The way your code is written, you are essentially waiting 500ms and then showing all the images at once.按照您的代码编写方式，您实际上是在等待 500 毫秒，然后一次显示所有图像。
You could set a timeout to show each image like so:您可以设置超时以显示每个图像，如下所示：
for (const i in imagesToShow) {
setTimeout(() => imagesToShow[i].classList.remove("isHidden"), i * 500);
}
The i * 500 will show the first image after 0ms , second one after 500ms , third after 1000ms , etc. i * 500将在0ms后显示第一张图像，在500ms后显示第二张图像，在1000ms后显示第三张图像，依此类推。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.