Как запустить и остановить событие одной кнопкой? JavaScript

Question

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

У меня при повторном клике накидает ту же функцию. Не пойму как работает и куда писать метод clearInterval().

Подскажите пожалуйста

document.getElementById('changeBtn').addEventListener('click', function () {
    setInterval(changeColorBtn, 2000);
    clearInterval(changeColorBtn)});

Answer 1

var timer;
document.getElementById('changeBtn').addEventListener('click', function () {
  if (timer)
    timer = clearInterval(timer);
  else
    timer = setInterval(changeColorBtn, 2000);
});

Answer 2

первое - это то, что Вы неправильно пытаетесь остановить setInterval. так правильно:

const intervalID = setInterval(changeColorBtn, 2000); //при запуске в intervalID передается/возвращается ID (ссылка), по которому надо обращаться к запущенном интервалу
clearInterval(intervalID)); //чтобы остановить нужно в clearInterval передать ID запущенного интервала как аргумент

второе - чтобы знать, запущен интервал или нет, нам нужно всегда где-то записывать/сохранять состояние этого интервала (запущено ли что-то, или нет). это можно реализовать многими способами, но мой коллега @Igor меня опередил и уже написал вариант ответа. еще несколько вариантов сохранения id интервала:

через замыкание внутри лексичесого окружения исполняемой функции
где-то в атрибутах блоков (data-interval="3434")

БЛОГ НА HUSL

Как запустить и остановить событие одной кнопкой? JavaScript

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