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

您可以取消綁定滾輪事件偵聽器，然後使用jQuery的.animate()回調函數來重新附加事件監聽器它完成後，像這樣：

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); 
    }   
}); 

這很粗糙，它使用全局變量，但它基本上關閉您的事件，而動畫正在運行。