Javascript: tun, um eine Aktion nach dem Benutzer erfolgt Scrollen

Question

Ich versuche, einen Weg, um herauszufinden, dies zu tun. Ich habe eine Liste von Kisten, jeder etwa hoch. Ich bin mit Javascript (und jquery) und möchten, dass, nachdem ein Benutzer nach unten scrollt eine Seite, die Seite wird automatisch abgerollt werden, damit die Boxen mit dem Rest der Seite in einer Reihe aufstellen (das heißt, wenn der Benutzer einen Bildlauf und die y Die Position der Seite ist nicht durch 150 teilbar, sie scrollt zum nächsten Punkt).

Jetzt, ich weiß, ich kann ein Ereignis mit dem 0quittieren .scroll() jquery Ereignis aktivieren, und ich kann es zu einem bestimmten Punkt mit .scrollTop() bewegen. Aber jedes Pixel, das der Benutzer bewegt, aktiviert die gesamte Funktion. So ist es eine Möglichkeit, um die Funktion zu verzögern von Brennen, bis der Benutzer nicht gescrollt hat, und wenn sie anfangen sollten wieder zu bewegen, wird die Funktion stoppen?

Answer 1

Wie Sie bereits jQuery verwenden, haben einen Blick auf Ben Alman's doTimeout plugin, die bereits die debouncing von Methoden behandelt (das ist, was Sie nach).

Beispiel schamlos von seiner Website gestohlen:

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

Answer 2

Sicher, im Ereignishandler für das Scroll-Ereignis, Feuer eine SetTimeout für 100 oder 200 Millisekunden später aus. Haben Sie die Funktion setTimeout, die Sie im scroll-Ereignishandler festgelegt haben, führen Sie die oben erwähnte Positionierungslogik aus. Lassen Sie außerdem den Scroll-Event-Handler alle Timeouts löschen, die von ihm selbst festgelegt wurden. Auf diese Weise wird die setTimeout-Funktion beim letzten Aufruf des Scroll-Ereignisses abgeschlossen, da das Scroll-Ereignis nicht gelöscht wurde.

Answer 3

Der Code:

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

Dies wäre ein Szenario, wo Vanille JavaScript nützlich wäre.

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

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

Answer 5

Dies ist im Grunde das gleiche wie Šime Vidas' Antwort, aber weniger aufwendigere:

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

500 die Verzögerung. Sollte für Maus Scroll in Ordnung sein.