javascript - 如何重置按下下一个/后退按钮时自动播放幻灯片的功能？

Question

我有一个图像幻灯片，它每 4 秒自动更改一次(autoslide())，因此当我按下一个/后退按钮之一时，倒计时会继续。

我想要的行为方式:当按下下一个/后退按钮之一时，自动幻灯片功能倒计时从 0 秒开始，而不继续之前的倒计时。

var index = 1;

function plusindex(n) {
  showimage(index += n);
}

showimage(index);

function showimage(n) {
  var slide = document.getElementsByClassName('sliders');

  if (n > slide.length) {
    index = 1
  };
  if (n < 1) {
    index = slide.length
  };
  for (i = 0; i < slide.length; i++) {
    slide[i].style.display = "none";
  }
  slide[index - 1].style.display = "block";

}

var time = 4000;
autoslide()

function autoslide() {
  var slide = document.getElementsByClassName('sliders');
  for (i = 0; i < slide.length; i++) {
    slide[i].style.display = "none";
  }
  if (index > slide.length) {
    index = 1
  };
  slide[index - 1].style.display = "block";
  index++;
  setTimeout(autoslide, time);
}

<button class="btn" id="btn1" onclick="plusindex(-1)">&#10094</button>
<button class="btn" id="btn2" onclick="plusindex(1)">&#10095</button>

Answer 1

您可以使用clearTimeout来完成此操作。您的函数autoslide需修改如下:

var timer;
function autoslide() {
  var slide = document.getElementsByClassName('sliders');
  for (i = 0; i < slide.length; i++) {
    slide[i].style.display = "none";
  }
  if (index > slide.length) {
    index = 1
  };
  slide[index - 1].style.display = "block";
  index++;
  timer = setTimeout(autoslide, time);
}

此处的计时器会跟踪您的下一次预定滑动。因此，您可以使用以下方法来重置计时器:

function plusindex(n){
  showimage(index +=n);
  clearTimeout(timer);
  timer = setTimeout(autoslide,time);
}