Question

我正在尝试制作幻灯片。我偷看了一些摘要，然后尝试在不进行明显复制的情况下重新创建它们。这是代码段：

var slideIndex = 0;
showSlides();

function showSlides() {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  slideIndex++;
  if (slideIndex > slides.length) {slideIndex = 1}
  slides[slideIndex-1].style.display = "block";
  setTimeout(showSlides, 2000); // Change image every 2 seconds
}

好吧，我不了解仅调用一次函数时setTimeout的工作原理，以及为什么不在函数外部使用setInterval。非常感谢。

Answer 1

showSlides做的最后一件事是将超时设置为2秒后再次调用自身。通话结束后，它将设置另一个超时。那将永远持续下去。

在这种情况下，使用setInterval不会有明显的不同。两者都会完成同一件事。 setInterval会更容易取消，这是一个优势。

如果您确实使用setTimeout，请确保在showSlides中删除对setInterval的呼叫：

var slideIndex = 0;

function showSlides() {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  slideIndex++;
  if (slideIndex > slides.length) {slideIndex = 1}
  slides[slideIndex-1].style.display = "block";
} 

setInterval(showSlides, 2000);

要取消间隔，请捕获setInterval返回的ID并调用clearTimeout：

let id = setInterval(showSlides, 2000);
clearTimeout(id); // This will clear and cancel the setInterval

Answer 2

检查此代码段，它将起作用！，您需要使用setInterval

   setInterval(showSlides, 2000);

var slideIndex = 0;
showSlides();

function showSlides() {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  slideIndex++;
  if (slideIndex > slides.length) {slideIndex = 1}
  slides[slideIndex-1].style.display = "block";
}


setInterval(showSlides, 2000);

<div class="mySlides">Slide 1</div>
<div class="mySlides">Slide 2</div>
<div class="mySlides">Slide 3</div>
<div class="mySlides">Slide 4</div>
<div class="mySlides">Slide 5</div>

将setTimeout与递归功能一起使用

2 个答案: