JavaScript: usare il debounce nell'infinite scroll

Un problema comune dell'infinite scroll in JavaScript è il controllo sulla sequenza di richieste AJAX. L'evento scroll è un evento continuo e viene eseguito in modo ripetuto. Onde evitare di creare una coda infinita di richieste AJAX, dobbiamo implementare una soluzione chiamata debounce.

Questa soluzione crea un ritardo nell'esecuzione di una funzione di callback:

function debounce( func, wait, immediate ) {
	var timeout;
	return function() {
		var context = this, args = arguments;
		var later = function() {
			timeout = null;
			if ( !immediate ) { 
				func.apply( context, args );
			}
		};
		var callNow = immediate && !timeout;
		clearTimeout( timeout );
		timeout = setTimeout( later, wait );
		if ( callNow ) { 
			func.apply( context, args );
		}
	};
};

Esempio d'uso:

var loadPage = debounce(function() {
	// AJAX
	
}, 300);

$( window ).on( "scroll", loadPage );