JavaScript/JQuery - Как временно отключить функцию после использования?

Question

У меня есть простой JS, который плавно автоматически прокручивается в другой div, когда колесико перемещается вверх или вниз.

Вот сценарий:

$(document).bind('mousewheel', function(evt) { 
     var delta = evt.originalEvent.wheelDelta 
     if(delta < 0){ 
       $('html, body').animate({ 
        scrollTop: $("#content-wrapper").offset().top 
       }, 3000); 
     } 
     else { 
       $('html, body').animate({ 
       scrollTop: $("#bgheader").offset().top 
       }, 3000); 
     }   
    }); 

Моя проблема заключается в том, что если я играю в течение нескольких секунд с помощью колесика мыши было бы начать прокрутку здесь и там навсегда, так как каждый шаг записывается в очередь в качестве дополнительного запуска сценария.

Можно ли каким-то образом «восстановить» сценарий? Так что после использования один раз он станет доступен для повторного использования, скажем, «3 секунды? Или как только анимация закончена?

Answer 1

Вы можете отвязать слушатель событий колеса, а затем использовать функцию обратного вызова .animate() JQuery, чтобы повторно прикрепить слушатель событий после того, как это делается, например, так:

function scrollHandler (event) { 
    $(document).off("mousewheel.custom"); 
    var delta = event.originalEvent.wheelDelta 
    if(delta < 0){ 
     $('html, body').animate({ 
      scrollTop: $("#content-wrapper").offset().top 
     }, 3000, function() { 
      // animation callback function 
      $(document).on("mousewheel.custom", scrollHandler); 
     })); 
    } 
    else { 
     $('html, body').animate({ 
      scrollTop: $("#bgheader").offset().top 
     }, 3000, function() { 
      // animation callback function 
      $(document).on("mousewheel.custom", scrollHandler); 
     }); 
    } 
} 

// namespace the event so we can easily .off() it 
$(document).on('mousewheel.custom', scrollHandler); 

Answer 2

Я использовал таймауты.

var maxPoll = 3000, 
    eventActive = false; 

$(document).bind('mousewheel', function(evt) { 
    if(eventActive) { 
     return 
    } else { 
     setTimeout(maxPoll, function() { eventActive = True }) 
    } 
    var delta = evt.originalEvent.wheelDelta 
    if(delta < 0){ 
     $('html, body').animate({ 
      scrollTop: $("#content-wrapper").offset().top 
     }, maxPoll); 
    } 
    else { 
     $('html, body').animate({ 
      scrollTop: $("#bgheader").offset().top 
     }, maxPoll); 
    }   
}); 

Это грубо, и он использует глобальные переменные, но в основном отключает ваше событие во время работы анимации.