Функция jQuery - предотвращает получение возвращений "на время"

Question

Я проверяю направление прокрутки с помощью wheelDelta, но он сразу возвращает множество свойств прокрутки. Мне нужно только знать, работает ли он или нет, и он не должен возвращать значение менее 500 мс после первого запуска. Я пытался поиграть с setTimeout, но не смог решить это красиво. Есть идеи?

var distance = $('.section-two').offset().top,
    $window = $(window);

    $window.scroll(function() {
        if ( $window.scrollTop() >= distance ) {
            $('body').css('overflow', 'hidden');
            setTimeout(function(){  
                $(document).bind('mousewheel', function(evt) {

                    var delta = evt.originalEvent.wheelDelta;
                    if(delta > 0){

                        console.log('scrolled up')
                    } else {
                        console.log('scrolled down');
                    }
                })
            }, 500);
        }
    });

Вот пример кода

Answer 1

Можете ли вы попробовать открепить 'mousewheel' событие, прежде чем связать его. Кажется, это связывает это снова и снова. добавлять $(document).unbind('mousewheel'); перед $(document).bind('mousewheel', function(evt) { линия.

Answer 2

Попробуйте использовать Lodash для регулирования события. Вы должны быть в состоянии сохранить предыдущее смещение и определить направление прокрутки из этого:

var lastScrollTop = 0;

function scrollHandler() {
   var scrollTop = window.pageYOffset || document.documentElement.scrollTop;

   if (scrollTop > lastScrollTop){
       console.info('scrolled down');
   } else {
       console.info('scrolled up');
   }
   
   lastScrollTop = scrollTop;
}

window.addEventListener('scroll', _.throttle(scrollHandler, 500))

<script src="https://cdn.jsdelivr.net/lodash/4.17.4/lodash.min.js"></script>

Answer 3

Решено с более правильным setTimeout: пример codepen

var doMouseWheel = true;
                $(document).bind("mousewheel", function(event, delta)
                {
                        // it'll just not do anything while it's false
                        if (!doMouseWheel)
                            return;

                        // here's where you were unbinding, now just turning false
                        doMouseWheel = false;

                        // do whatever else you wanted
                        var delta = event.originalEvent.wheelDelta;
                        if(delta > 0){
                            console.log('scrolled up')
                        } else {
                            console.log('scrolled down');
                        }

                        // here's where you were rebinding, now wait 200ms and turn on
                        setTimeout(turnWheelBackOn, 800);
                });

                function turnWheelBackOn() { doMouseWheel = true; }