jQuery scroll event fire fire una vez por scroll

Tengo un código de jQuery para verificar si me he desplazado hasta la parte inferior de la ventana.

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

La función Mi appendToGrid () desplaza al usuario a la parte superior de la página y agrega contenido. El problema es que necesito esta función llamada una vez por desplazamiento. Como lo tengo ahora, se llama varias veces por desplazamiento.

Si lo cambio a

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

solo se disparará una vez en total, pero necesito que se dispare una vez por desplazamiento para que el usuario pueda desplazarse hasta la parte inferior y seguir siendo enviado de vuelta a la parte superior de la página.

También he intentado lo siguiente, pero todavía se dispara varias veces.

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

Podría agregar un temporizador de enfriamiento una vez que se llame a appendToGrid. Esto es similar a su bandera activada pero solo se restablece después de una espera de 2000 ms. Puedes ajustar ese tiempo a lo que se sienta mejor.

 var recentScroll = false; $(window).on('scroll',function() { if(!recentScroll && $(window).scrollTop() + $(window).height() == $(document).height()) { appendToGrid(); recentScroll = true; window.setTimeout(() => { recentScroll = false; }, 2000) } }); 

Otra opción sería acelerar la lógica para que solo suceda después de que el usuario detenga la acción por un período de tiempo.

 $(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); }); });