向下滑動並向上滑動事件混合在一個快速鼠標滾輪上下

Question

我使用jquery slideDown()和slideUp()以顯示固定的gototop鏈接，當滾動條高度大於200px時。

問題：

鏈接滑動動作在fast mouse wheel up and down混合起來。由於滑動功能的運行時間爲0.4 sec。我試圖定義一個visible flag和complete functions以防止混合。但不成功。

JsFiddle

向下滾動result block查看鏈接，並嘗試快速輪向上和向下。如果屏幕上的結果塊高度很大，請降低高度以查看操作。

impress: function() { 
    if ($(window).scrollTop() > this.MIN_SCROLL_HEIGHT 
     && !this.buttonVisibleFlag) 
    { 
     this.button.slideDown(400, function() { 
      Blue.buttonVisibleFlag = true; 
     }); 
    } 
    else if ($(window).scrollTop() <= this.MIN_SCROLL_HEIGHT 
      && this.buttonVisibleFlag) 
    { 
     this.button.slideUp(400, function() { 
      Blue.buttonVisibleFlag = false; 
     }); 
    } 
} 

任何想法或幫助將不勝感激。

Answer 1

我認爲你最好的選擇是在用戶停止滾動某個（小）時間段後才執行滑動操作。我發現this method當用戶停止滾動，並在你的代碼中實現檢測，這裏的結果：

Updated fiddle

var Blue = { 
    MIN_SCROLL_HEIGHT: 200, 
    button: null, 
    buttonVisibleFlag: null, 

    init: function() { 
     this.button = $(".gototop"); 
     this.buttonVisibleFlag = false; 
     this.setWindowBindings(); 
    }, 
    setWindowBindings: function() { 
     $(window).scroll(function() { 
      //perform actions only after the user stops scrolling 
      clearTimeout($.data(this, 'scrollTimer')); 
      $.data(this, 'scrollTimer', setTimeout(function() { 
       Blue.impress(); 
      }, 150)); 
     }); 
    }, 
    impress: function() { 
     if ($(window).scrollTop() > this.MIN_SCROLL_HEIGHT) { 
      this.button.slideDown(); 
     } else if ($(window).scrollTop() <= this.MIN_SCROLL_HEIGHT) { 
      this.button.slideUp(); 
     } 
    } 
} 

$(document).ready(function() { 
    Blue.init(); 
}); 

注意：您可能需要調整，以滿足您的需求超時間隔