时间戳

首页 > 解决方案 > 将 setTimeout 与递归函数一起使用

javascript - 将 setTimeout 与递归函数一起使用

问题描述

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

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

标签： javascriptrecursionsettimeout

解决方案

最后一件事showSlides是设置一个超时，以便在 2 秒后再次调用自己。该调用完成后，它会设置另一个超时。这将永远持续下去。

在这种情况下，如果您使用setInterval. 两者都会完成同样的事情。setInterval不过取消会更容易，这是一个优势。

如果您确实使用，请务必删除对setTimeoutin的调用：showSlidessetInterval

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);

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

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

推荐阅读