Как можно реализовать приостановку выполнения анимации js(у слайдера)

Question

У меня есть почти рабочий код приостановки анимации у слайдера при нажатии на кнопку, но он срабатывает корректно только при первой остановке, далее у меня прокручивается по 2 слайда( Что нужно исправить?

var switchInterval = setInterval(function() { //смена слайдов
    nextSlideAuto(e);
}, slideInterval);


btnPrev.addEventListener('click', function () { // при нажатии на кнопку останавливаем смену слайдов
    var timeOut = setInterval(function run() {
        clearInterval(timeOut)
        var switchInterval = setInterval(function() { // запускаем смену заного
            nextSlideAuto(e); //функция прокрутки слайдов
          }, 4000);
      }, 3000);
})

Answer 1

var timeOut = setInterval(function run() {
        clearInterval(timeOut)

Здесь при клике запускается интервал (а назван timeOut?!) и тутже стирается: Ноль эффекта. Во-вторых, объявленный switchInterval далее нигде не удаляется, создается новый var switchInterval дополнительный интервал.

"На месте" можно исправить так:

var switchInterval = setInterval(function() {
  nextSlideAuto(e);
}, slideInterval);

var timeout = null;    
btnPrev.addEventListener('click', function() {
  clearTimeout(timeout); // останавливается таймер, который планирует запуск слайдера
  clearInterval(switchInterval); // останавливается интервал слайдера.
  
  timeout = setTimeout(function run() {
    // Снова начинает трехсекундный отсчет.

    switchInterval = setInterval(function() {
      nextSlideAuto(e);
    }, slideInterval);
    // Если за 3 секунды снова не кликнули, запустится новый.

  }, 3000);
});

timeout, switchInterval — Не создаются новые переменные. Они только перезаписываются, и всегда хранят номер текущего запущенного таймера, который нужно будет отключить.

У вас же будут еще и другие кнопки. Чтобы везде не повторять эти три строчки запуска слайдера, можно сделать такой фокус:

let i = 0;

function nextSlideAuto() {
  console.clear();
  console.log(i = (i + 1) % 5);
}

nextSlideAuto.run = function() {
  this._interval = setInterval(this, 1000);
};
nextSlideAuto.stop = function() {
  clearInterval(this._interval);
};

/***/

nextSlideAuto.run();

var timeout = null;    
btnPrev.addEventListener('click', function() {
  clearTimeout(timeout);
  nextSlideAuto.stop();
  
  console.log("Остановлен на 3 сек");

  timeout = setTimeout(function() {
    nextSlideAuto.run();
  }, 3000);
});

<button id="btnPrev">T E S T</button>

Или уж весь таймер оформить в виде обычного объекта со внутренним счетчиком и методами)

БЛОГ НА HUSL

Как можно реализовать приостановку выполнения анимации js(у слайдера)

Ответы (1 шт):