JavaScript: come riuscire a gestire azioni ripetute su eventi ad invocazione continua

JavaScript: come riuscire a gestire azioni ripetute su eventi ad invocazione continua

Le azioni ripetute in JavaScript possono creare problemi quando vengono associate ad eventi continui.

Possiamo definire la seguente funzione:


'use strict';

const debounce = ( func, wait, immediate ) => {
	let timeout;
	return () => {
		let context = this, args = arguments;
		const later = () => {
			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 con l'evento scroll:


window.addEventListener( 'scroll', () => {
	
	debounce(() => {
		//...	
	}, 250);
	
}, false);