Как сделать чтобы EventListener не работал некоторое время?

Question

[Egorian]

var a=0
window.addEventListener('wheel', function(e) {
    
        if (e.deltaY < 0) {
    //scroll up
     if(a-1>=0){ a--;
    $(window).scrollTo($('.section').eq(a),{duration:1000});
      console.log('now i am scrolling up and')
                 
  }
  }
  if (e.deltaY > 0) {
    //scroll down
      if(a+1<=sections.length){a++
      $(window).scrollTo($('.section').eq(a),{duration:1000});
         console.log('now i am scrolling down and a=')};
    
  }
    });

Этот код плавно скролит страницу по блокам section. Тут используется плагин scrollTo.
Проблема в том, что если человек прокрутит колесико мышки несколько раз, то страница несколько раз проскролится.
Как сделать, чтобы пока страница не проскролится, этот код не срабатывал?

Answer 1

[GreatRash]

var sctollInProcess = false;

window.addEventListener('wheel', function(e) {
  if (scrollInProcess) return;

  // ваш код

  scrollInProcess = true;

  setTimeout(function() {
    scrollInProcess = false;
  }, 1000);
});

Answer 2

[Pavel Shvedov]

Например добавить булевый флаг, который перед стартом скроллинга менять на false, к примеру, и менять обратно после скроллинга (у scrollTo есть возможность передать колбэк, который дернется после окончания анимации, вот там менять флаг обратно), остается только в этом же обработчике перед скроллом добавить проверку этого флага, и не начинать скролить, если какой-то из обработчиков этот флаг переключил

Answer 3

[ned4ded]

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

(() => {
  const scrollingFn = () => {
   window.removeEventListener('wheel', scrollingFn);

   $.scrollTo($('.something'), 1000, {
     onAfter: () => window.addEvenListener('wheel', scrollingFn),
   });
  }

  window.addEventListner('wheel', scrollingFn);
})();