Почему не работает clearInterval?

Question

[Сергей Бурдужа]

Создал простенький слайдер https://jsfiddle.net/serii/otoj13zn/1/
По клику на картинку запускается setInterval, а родителю задается класс active.
Если еще раз кликну, класс active убирается, и должен очистится setInterval и завершиться показ слайдеров.
Но clearInterval не работает.
Может у кого есть время взглянуть?
Заранее благодарен.

Answer 1

[xmoonlight]

Надо разнести loopSlider на две разных функции:
1. Переключение состояния по клику (toggle)
2. Функция таймера с глобальным идентификатором таймера (анимация/animation frame function)

Comments

[Сергей Бурдужа]

Я не очень понимаю, что вы имеет в виду? Можно немного подробнее?
Я так понимаю, нужно создать две функции и в зависимости от состояния родителя, запускать ту или иную в цикле for?

[xmoonlight]

Сергей Бурдужа, нет.
Функция таймера крутится постоянно и меняет циклически изображения. Идентификатор таймера - это глобальная переменная!

В другой функции (обработчик события клика по изображениям) - Вы меняете класс у родителя и также управляете таймером: запускаете таймер (в случае, если он был выключен) или останавливаете через clearInterval.

[Сергей Бурдужа]

xmoonlight, если я правильно понимаю, то мне следует setInterval вообще из цикла вынести? Тогда он будет постоянно крутиться. А мне нужно, чтобы он сработал при клике.

[xmoonlight]

Сергей Бурдужа, ну так он начнёт крутиться только после того, как будет выполнен клик, саму функцию таймера ("тело") - вынесите отдельно.

[Сергей Бурдужа]

xmoonlight, Спасибо, немного помучался, но доделал.

let btnPrev = document.querySelector('.btn-prev');
let btnNext = document.querySelector('.btn-next');
let stop = document.querySelector('.stop');
let animationDuration = 2000;

let images = document.querySelectorAll('.gallery .photos img');
let intervalSlides;

let j = 0;

function nextSlider(){
  for(let i = 0; i < images.length; i++){
    images[i].className = '';
  }

  images[j].className = 'showed';

  console.log(images[j]);

  j++;

  if (j > images.length - 1) {
    j = 0;
  }
}

function startSlider(){
  intervalSlides = setInterval(function(){
    nextSlider();
  }, animationDuration);
}

for(let j = 0; j < images.length; j++){
  images[j].onclick = function(e){

    if(e.target.parentElement.classList.contains('active')){
      e.target.parentElement.classList.remove('active');
      clearInterval(intervalSlides);
      stop.classList.add('show');
    }else{
      e.target.parentElement.classList.add('active');
      startSlider();
      stop.classList.remove('show');
    }
  };
}

let i = 0;

btnPrev.onclick = function () {
  images[i].className = '';
  i--;

  if (i < 0) {
    i = images.length - 1;
  }

  images[i].className = 'showed';
};

btnNext.onclick = function () {
  images[i].className = '';

  i++;

  if (i > images.length - 1) {
    i = 0;
  }

  images[i].className = 'showed';
};

[xmoonlight]

Сергей Бурдужа, Во! Респект и уважуха!