4

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

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

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

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

2 ответа 2

3
var timer;
document.getElementById('changeBtn').addEventListener('click', function () {
  if (timer)
    timer = clearInterval(timer);
  else
    timer = setInterval(changeColorBtn, 2000);
});
3
  • Большое спасибо! Я так понимаю что в данном случае идет от обратного, изначально остановка, а после идет таймер. я правильно понимаю?) 13 фев 2020 в 21:43
  • @TarasYurovskiy Не совсем. По первому клику таймер будет запущен, так как изначально переменная timer - неопределена, то есть false.
    – user176262
    13 фев 2020 в 22:44
  • Аааа, вот оно что! еще раз спасибо) 13 фев 2020 в 22:49
1

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

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

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

  • через замыкание внутри лексичесого окружения исполняемой функции
  • где-то в атрибутах блоков (data-interval="3434")
1
  • Спасибо за обширный ответ. Буду иметь ввиду) 13 фев 2020 в 21:44

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.