将 setTimeout 与递归函数一起使用

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 不过取消会更容易，这是一个优势。

如果您确实使用 setInterval，请务必删除 showSlides 中对 setTimeout 的调用：

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 与递归函数一起使用

Use setTimeout with Recursion funtion

javascript

recursion

settimeout