Как отменить SetInterval?

Документ разделен по высоте на 2 части до 600px и от 600px.
Когда прокручиваем 600px и более включается таймер от 60 до 0 сек.
Если прокрутим назад, например до 500px, то таймер нужно остановить и сбросить до 60сек.

Что сделал: При прокрутке 600px, включаю таймер и добавляю класс timer, чтобы при прокрутке вниз таймер еще раз не запустился.
Но когда прокручиваю назад до 500px, не знаю как его остановить.

И возможно есть более элегантное решение, чем применять класс.
PS. В рабочем проекте, у меня 6 областей по высоте.

  • Вопрос задан
  • 121 просмотр
Решения вопроса 1
Tolly
@Tolly Автор вопроса
Вынес определение переменной за функцию и все заработало.
Странно, что перед тем как здесь писать, я это проверил и не работало.
Но ночь была темной, наверно что-то не так делал.
Решение простое, но никто не подсказал.
Ответ написан
Пригласить эксперта
Ответы на вопрос 3
Vlad_IT
@Vlad_IT Куратор тега JavaScript
Front-end разработчик
Можно вынести переменную с id таймера за пределы функции, тогда при вызове clearTimeout будет доступна актуальная ссылка. Но удобнее и корректнее хранить id таймера в замыкании, таким образом, код можно будет использовать много раз.
let el = document.getElementById('a');

function func(){
  let timeId;
  
  const handleScroll = () => {
    let scrollPos = window.pageYOffset;
    document.getElementById('z').innerHTML = scrollPos;
    if(scrollPos > 600) {
      if(!el.classList.contains('timer')) {
        el.classList.add('timer');

        let b = 60;
        timeId = setInterval(() => {
          b--;
          el.innerHTML=b;
          if(b == 0){
            el.classList.remove('timer');
            clearInterval(timeId);
            alert('Отлично!');
          }
        }, 1000);
      }  
    } else {
      console.warn('stop');
      clearInterval(timeId);
    }
  }
  window.addEventListener('scroll', handleScroll); 
}

func();
Ответ написан
dasha_programmist
@dasha_programmist
ex Software Engineer at Reddit TS/React/GraphQL/Go
clearInterval
Ответ написан
staik
@staik
Front-end developer
Добрый день. Вам необходимо обозначить setInterval как функцию, типа:
var myInterval = setInterval(function(){
        //ваша функция
    }, 1000);

И вы можете просто обнулить интервал при помощи функции clrearInterval. Документация тут

Будет это выглядеть таким образом:
function myStopFunction() {
  clearInterval(myInterval );
}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы