Повторный вызов setInterval после clearInterval приводит к нескольким интервалам (Слайд-шоу) - PullRequest
Новая
       32

Повторный вызов setInterval после clearInterval приводит к нескольким интервалам (Слайд-шоу)

0 голосов
/ 04 февраля 2020

Я новичок в Javascript, и мне очень трудно правильно разработать собственное слайд-шоу.

Я в основном настроил слайд-шоу, состоящее из трех изображений, с setInterval, установленным на функцию 5 секунд, три кнопки для навигации по изображениям и т. д. c.

Единственная проблема, с которой я сталкиваюсь, - это когда пользователь нажимает определенную кнопку (какая кнопка может быть ) таймер не сбрасывается.

Я пробовал несколько разных способов, так как я исследовал это со вчерашнего дня, и я нашел более эффективный способ, которым clearInterval действительно работает после нажатия кнопки, но что происходит, это запускает несколько таймеров. Скажем, если я дважды нажму на кнопку, с секундой после каждого щелчка, первый таймер (из 5 секунд) будет сброшен, однако эти два щелчка создадут два 5-секундных таймера, что сделает слайд-шоу go бананами. Я чувствую, что где-то должен быть .stop (), но я не могу понять, где и даже если в этом и заключается проблема, указанная c. 

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

  });

1 Ответ

0 голосов
/ 04 февраля 2020

Вы забыли закрыть функцию 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
...