Javascript Events limitieren / drosseln

Manche Events, wie z.B. resize oder scroll feuern zu häufig für die meisten normalen Anwendungen – vor allem wenn gleichzeitig eine HTML Manipulation am DOM passieren soll. Solche Events kosten dann viel Performance. Es ist meist nötig diese mit einem Timeout zu drosseln, damit das Javascript Event verzögert mit einem Delay ausgeführt wird – und nicht mehr so häufig.

let   throttle_timer = null; /* Globale Variable für den Timer */
const throttle_delay = 200; /* Throttle Delay in ms */
 
window.addEventListener( 'scroll', function( event ) {
	/* Timer zruück setzen */
	if( throttle_timer ) { window.clearTimeout( throttle_timer ); }
 
	/* Starte Warten */
	throttle_timer = window.setTimeout(function() {
		/* Hier der eigentliche Event Code */
		console.log( "Firing!" );
	}, throttle_delay );
})

Ich bin über die Debounce Methode gestolpert: debounc( function, timeout ); die scheinbar das gleiche macht:

• educative.io » debounce() - Artikel über die Funktion