将 setTimeout 与递归函数一起使用答案

【问题标题】：Use setTimeout with Recursion funtion将 setTimeout 与递归函数一起使用
【发布时间】：2020-10-22 14:55:42
【问题描述】：

我正在尝试制作幻灯片。我偷看了一些 sn-ps，然后尝试在不直接复制的情况下重新创建它们。这是sn-p：

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。非常感谢。

【问题讨论】：

为什么不能在函数外使用setInterval？
其实这是我的疑惑。何时以及为什么应该使用带有 setTimeout 的递归，而不是在它之外使用 setInterval。
这完全取决于你如何编码。没有关于人们如何编码的确切定义。

标签： javascript recursion settimeout

【解决方案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

【讨论】：

非常感谢。我不知道为什么 setTimeout 会这样做，这很清楚。

【解决方案2】：

检查这个sn-p，它会工作！你需要使用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>

【讨论】：

感谢您的回答，两个答案都很棒。