Остановить функцию прокрутки от queing до

Question

Я создал систему прокрутки с javascript для сайта, над которым я работаю, и у меня возникают проблемы с его опрокидыванием всего входа.

Вот пример моей проблемы, попробуйте прокрутить, и вы увидите, в чем проблема. http://fadedmeadows.com/test/

var index = 0; 
 
var scroll2 = true; 
 
$(document).ready(function() { 
 
    $("#home").css({ 
 
    "color": "#eb0e0e", 
 
    }); 
 
}); 
 

 
$(window).bind('mousewheel DOMMouseScroll touchmove', function(event) { 
 
    scroll2 = true; 
 
    if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) { 
 
    // scroll up 
 
    if (index > 4) index = 4; 
 

 
    if (index == 4 && scroll2 == true) { 
 
     $('html, body').animate({ 
 
     scrollTop: $("#content3").offset().top 
 
     }, 1000); 
 
     index--; 
 
     scroll2 = false; 
 
    } 
 
    if (index == 3 && scroll2 == true) { 
 
     $('html, body').animate({ 
 
     scrollTop: $("#content2").offset().top 
 
     }, 1000); 
 
     index--; 
 
     scroll2 = false; 
 
    } 
 
    if (index == 2 && scroll2 == true) { 
 
     $('html, body').animate({ 
 
     scrollTop: $("#content").offset().top 
 
     }, 1000); 
 
     index--; 
 
     scroll2 = false; 
 
    } 
 
    if (index == 1 && scroll2 == true) { 
 
     $('html, body').animate({ 
 
     scrollTop: $("header").offset().top 
 
     }, 1000); 
 
     index--; 
 
     scroll2 = false; 
 
    } 
 
    } else { 
 
    // scroll down 
 
    if (index < 0) index = 0; 
 
    if (index == 0 && scroll2 == true) { 
 
     $('html, body').animate({ 
 
     scrollTop: $("#content").offset().top 
 
     }, 1000); 
 
     index++; 
 
     scroll2 = false; 
 
    } 
 
    if (index == 1 && scroll2 == true) { 
 
     $('html, body').animate({ 
 
     scrollTop: $("#content2").offset().top 
 
     }, 1000); 
 
     index++; 
 
     scroll2 = false; 
 
    } 
 
    if (index == 2 && scroll2 == true) { 
 
     $('html, body').animate({ 
 
     scrollTop: $("#content3").offset().top 
 
     }, 1000); 
 
     index++; 
 
     scroll2 = false; 
 
    } 
 
    if (index == 3 && scroll2 == true) { 
 
     $('html, body').animate({ 
 
     scrollTop: $("#content4").offset().top 
 
     }, 1000); 
 
     index++; 
 
     scroll2 = false; 
 
    } 
 
    } 
 
});

Answer 1

Не уверен, если это поможет, но у меня есть слушателя для фактического события, и он устанавливает тайм-аут, когда принимается событие.

Если событие срабатывает до истечения предыдущего таймаута, я отменяю предыдущий. И таймаут фактически вызывает действие. Таким образом, поток подобных событий, которые происходят сразу после друг друга, замалчивается и отбрасывается.

Я использую это главным образом для событий изменения размера окна, но он может применяться и здесь. Чистый JS код может выглядеть примерно так:

var resizeTimeout = null, wait = 200; 
window.onresize = function(){ 
    if (resizeTimeout !== null) { 
    window.clearTimeout(resizeTimeout); 
    resizeTimeout = null; 
    } 
    resizeTimeout = setTimeout(function(){ 
    //do whatever is needed to deal with window resize. 
    }, wait); 
} 

(Но у меня есть обертку «класс» называется Timer, которые делают его немного чище делать такого рода вещи)