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

Question

[Анатолий]

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

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

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

Answer 1

[Анатолий]

Вынес определение переменной за функцию и все заработало.
Странно, что перед тем как здесь писать, я это проверил и не работало.
Но ночь была темной, наверно что-то не так делал.
Решение простое, но никто не подсказал.

Answer 2

[Владимир Проскурин]

Можно вынести переменную с 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();

Answer 3

[Даша Циклаури]

clearInterval

Comments

[Анатолий]

Ну так это понятно, вопрос как в задаче таймер остановить.
Дело в том, что создается другая переменная.
Т.е. если задать
let a
а затем задать еще раз
let a
то вопрос как теперь обратится к первой переменной
вот в этом вся загвоздка

А так у меня в примере и так остановка счетчика происходит, когда он от 60 до 0 досчитает.

Answer 4

[Владислав Ким]

Добрый день. Вам необходимо обозначить setInterval как функцию, типа:

var myInterval = setInterval(function(){
        //ваша функция
    }, 1000);

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

Будет это выглядеть таким образом:

function myStopFunction() {
  clearInterval(myInterval );
}