Javascript: realice una acción después de que el usuario termine de desplazarse

Question

Estoy tratando de encontrar una manera de hacerlo. Tengo una lista de cuadros, cada uno de ellos acerca de 150px de alto. Estoy usando javascript (y jquery) y quiero que, después de que un usuario se desplace por una página, la página se desplace automáticamente para que los cuadros se alineen con el resto de la página (es decir, si el usuario se desplaza y el y la posición de la página no es divisible por 150, se desplazará al punto más cercano).

Ahora, en este momento, sé que puedo activar un evento usando el evento jquery .scroll(), y puedo hacer que se mueva a cierto punto usando .scrollTop(). Pero cada píxel que el usuario mueve la barra de desplazamiento activa toda la función. Entonces, ¿hay alguna manera de retrasar la activación de la función hasta que el usuario no se haya desplazado, y si comienzan a desplazarse nuevamente, la función se detendrá?

Answer 1

Como ya está utilizando jQuery, echar un vistazo a Ben Alman's doTimeout plugin que ya se encarga de la debouncing de métodos (que es lo que está después).

Ejemplo robado descaradamente de su página web:

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

Answer 2

Seguro, en el controlador de eventos para el evento de desplazamiento, disparar un setTimeout durante 100 o 200 milisegundos más tarde. Haga que la función setTimeout que configure dentro del manejador de eventos scroll ejecute la lógica de posicionamiento mencionada anteriormente. También haga que el controlador de eventos de desplazamiento elimine los tiempos de espera configurados por sí mismo. De esta forma, la última vez que se dispara el evento de desplazamiento, la función setTimeout se completará ya que el evento de desplazamiento no lo ha borrado.

Answer 3

El código:

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

Esto sería un escenario, donde JavaScript básico sería útil.

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

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

Answer 5

Esta es básicamente la misma que la respuesta Šime Vidas', pero menos comlex:

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

500 es el retraso. Debería estar bien para el desplazamiento del mouse.