Javascript: выполните действие после того, как пользователь выполнит прокрутку

Question

Я пытаюсь найти способ сделать это. У меня есть список ящиков, каждый около 150px высокий. Я использую javascript (и jquery) и хочу, чтобы после того, как пользователь прокручивает страницу вниз, страница будет автоматически прокручиваться, чтобы поля соответствовали остальной части страницы (то есть, если пользователь прокручивает и y позиция страницы не делится на 150, она будет прокручиваться до ближайшей точки).

Теперь, я знаю, что могу активировать событие, используя событие jquery .scroll(), и я могу заставить его перейти к определенной точке, используя .scrollTop(). Но каждый пиксель, который пользователь перемещает полосой прокрутки, активирует всю функцию. Так есть способ отсрочить функцию от стрельбы до тех пор, пока пользователь не прокрутит, и если они начнут прокручиваться снова, функция остановится?

Answer 1

Как вы уже используете JQuery, взгляните на Ben Alman's doTimeout plugin, который уже обрабатывает debouncing методов (что вы после).

Пример бессовестно украдены с его сайта:

$(window).scroll(function(){ 
    $.doTimeout('scroll', 250, function(){ 
     // do something computationally expensive 
    }); 
}); 

Answer 2

Убедитесь, что в обработчике событий для события прокрутки отключить setTimeout на 100 или 200 миллисекунд позже. Пусть эта функция setTimeout, установленная внутри обработчика событий прокрутки, делает логику позиционирования, указанную выше. Кроме того, обработчик события прокрутки очистит все тайм-ауты, установленные самим. Таким образом, при последнем запуске события прокрутки функция setTimeout завершится, так как событие прокрутки не очистило его.

Answer 3

Код:

var scrollTimeout = null; 
var scrollendDelay = 500; // ms 

$(window).scroll(function() { 
    if (scrollTimeout === null) { 
     scrollbeginHandler(); 
    } else { 
     clearTimeout(scrollTimeout); 
    } 
    scrollTimeout = setTimeout(scrollendHandler, scrollendDelay); 
}); 

function scrollbeginHandler() { 
    // this code executes on "scrollbegin" 
    document.body.style.backgroundColor = "yellow"; 
} 

function scrollendHandler() { 
    // this code executes on "scrollend" 
    document.body.style.backgroundColor = "gray"; 
    scrollTimeout = null; 
} 

Answer 4

Это будет сценарий, где ваниль JavaScript будет полезным.

var yourFunction = function(){ 
    // do something computationally expensive 
} 

$(window).scroll(function(){ 
    yfTime=setTimeout("yourFunction()",250); 
}); 

Answer 5

Это в основном так же, как ответ Šime Vidas', но менее Comlex:

var scrollTimeout = null; 
$(window).scroll(function(){ 
    if (scrollTimeout) clearTimeout(scrollTimeout); 
    scrollTimeout = setTimeout(function(){yourFunctionGoesHere()},500); 
}); 

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