jQuery Scroll Ereignis Feuer einmal pro Rolle

Question

Ich habe einige jQuery-Code zu überprüfen, ob ich auf den unteren Rand des Fensters gescrollt habe.

Meine AppendToGrid() -Funktion scrollt den Benutzer an den Anfang der Seite und fügt Inhalt hinzu. Problem ist, ich brauche diese Funktion einmal pro Scroll aufgerufen. Wie ich es jetzt habe, wird es mehrmals pro Scroll aufgerufen.

Wenn ich es

$(window).one('scroll',function() { 
    if($(window).scrollTop() + $(window).height() == $(document).height()) { 
     appendToGrid(); 
    } 
}); 

zu

ändern wird es nur einmal insgesamt Feuer, aber ich brauche es per Scroll einmal abzufeuern, damit der Benutzer nach unten scrollen und immer wieder an die Spitze der immer geschickt Seite.

Ich habe auch das unten versucht, aber es feuert immer noch mehrere Male.

var fired = false; 
$(window).scroll(function(){ 
    if($(window).scrollTop() + $(window).height() == $(document).height() && !fired) { 
     fired = true; 
     appendToGrid(); 
     fired = false; 
    } 
}) 

Answer 1

Sie können einen Cooldown-Timer hinzufügen, sobald appendToGrid aufgerufen wird. Dies ähnelt Ihrem fired Flag, aber es wird nur nach einer Wartezeit von 2000ms zurückgesetzt. Sie können diese Zeit auf das einstellen, was sich am besten anfühlt.

Answer 2

Eine andere Option wäre, die Logik zu drosseln, so dass dies nur geschieht, nachdem der Benutzer die Aktion für eine bestimmte Zeit stoppt.

$(function(){ 
 
    //cache common variables so they are created once 
 
    var $window = $(window); 
 
    var $document = $(document); 
 
    var debounce; 
 
    
 
    $window.on('scroll', function(){ 
 
    //clear the delay if it's not finished yet 
 
    if (debounce) clearTimeout(debounce); 
 
    
 
    //start a new delay 
 
    debounce = setTimeout(function(){ 
 
     //remove reference so another delay can start 
 
     debounce = null; 
 
     //perform whatever logic you normally would do 
 
     if($window.scrollTop() + $window.height() == $document.height()) { 
 
     appendToGrid(); 
 
     } 
 
    }, 300); 
 
    }); 
 
});