在 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 函数。这会导致所有其他代码（现在位于其中）在每次 myTimer 被 setInterval 函数调用时被调用。

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