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

Question

我是Java语言的新手，在以适当的方式开发自己的幻灯片时遇到很大的困难。

我基本上已经设置了一个由三个图像组成的幻灯片，其中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