clearInterval 后重新调用 setInterval 导致多个间隔（幻灯片）

Question

我是 Javascript 的新手，我很难以正确的方式制作自己的幻灯片。

我基本上设置了一个由三张图片组成的幻灯片放映，将 setInterval 设置为 5 秒的功能，三个用于浏览图片的按钮等等。

我遇到的唯一问题是，在用户单击某个按钮（可能是哪个按钮）后，计时器不会重置。

自从昨天以来我一直在研究这个问题以来，我尝试了几种不同的方法，并且我发现了一种更有效的方法，即 clearInterval 在单击按钮后确实有效，但实际情况是它会触发多个计时器。假设我在一个按钮上单击两次，每次单击间隔一秒，第一个计时器（5 秒）将被重置，但是这两次单击创建两个 5 秒计时器，使幻灯片放映变得疯狂。我觉得应该有一个 .stop() 某处，但我不知道具体在哪里，甚至不知道这是否是问题所在。

function myTimer() {

  var indice_activo = $('.active').index();

  if (indice_activo < $('.intro-slide').length - 1) {

    var proximo_indice = indice_activo + 1;

  } else {
    var proximo_indice = 0;
  }


  mudar_slide(proximo_indice);


  var indice_activo = $('.active').index();

  var botao_anterior = indice_activo - 1

  // var proximo_indice = indice_activo + 1;

  $('.button').removeClass('active-button');

  $('.button').eq(indice_activo).addClass('active-button');


  if (indice_activo > 0) {

    $('.button').eq(botao_anterior).removeClass('active-button');

  } else {

    $('.button').eq(2).removeClass('active-button');
  }
};



  // BUTTON CLICK WITH CLEARINTERVAL AND RE-INVOCATION OF FUNCTION

  $('.button').click(function() {

    clearInterval(intervalo);

    setInterval(myTimer, 5000);


    $('.button').removeClass('active-button');


    var indice_botao_atual = $(this).index();


    $('.intro-slide').removeClass('active').stop().fadeOut();


    $('.intro-slide').eq(indice_botao_atual).addClass('active').stop().fadeIn();

    $(this).addClass('active-button');

  });

Answer 1

您忘记关闭 myTimer 功能。这会导致所有其他代码（现在位于其中）在每次 setInterval 函数调用 myTimer 时被调用。

function myTimer() {

  var indice_activo = $('.active').index();

  if (indice_activo < $('.intro-slide').length - 1) {

    var proximo_indice = indice_activo + 1;

  } else {
    var proximo_indice = 0;
  }

} // <--- missing curly brace

clearInterval 后重新调用 setInterval 导致多个间隔（幻灯片）

Re-Invocation of setInterval after clearInterval results in multiple intervals (Slideshow)

javascript

slideshow

setinterval

clearinterval