JavaScript: il problema delle sequenze AJAX ripetute

Un problema comune in JavaScript è il controllo sulla sequenza di richieste AJAX ripetute.

L'evento scroll ad esempio è 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:

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

Esempio d'uso:

const loadPage = debounce(() => {
	// AJAX
	
}, 300);

window.addEventListener( 'scroll', loadPage );