слайд вниз и слайд вверх события смешались в быстром колеса мыши вверх и вниз

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

Примечание: Вы можете настроить интервал времени ожидания в соответствии с вашими потребностями