Ritardare l'esecuzione degli eventi con Javascript

L'articolo Delaying Javascript Event Execution apparso sul blog Matt's 411 è un ottimo spunto per capire quali effetti possiamo ottenere interagendo con Javascript al livello dell'applicazione. Vediamo il seguente script creato da Matt:

var onFooEndFunc = function() {
	var delay = 50; /* milliseconds - vary as desired */
	var executionTimer;
	return function() {
		if (executionTimer) {
			clearTimeout(executionTimer);
		}
		executionTimer = setTimeout(function() {
			// YOUR CODE HERE
		}, delay);
	};
}();

Esso consente di creare degli "eventi personalizzati" che si basano su altri eventi esistenti, ma che vengono eseguiti al completamento di questi ultimi. Ovviamente dobbiamo metterci del nostro: la funzione personalizzata che viene chiamata dopo un determinato lasso di tempo ed il ritardo in ms ad esempio.

Nell'articolo troviamo 3 interessanti demo che utilizzano questa tecnica per creare altrettanti eventi custom: onScrollEnd (simula il completamento dello scrolling), onMouseMoveEnd (simula il completamento dell'azione di movimento del mouse) ed onResizeEnd (simula il completamento dell'azione di ridimensionamento della finestra).

Il funzionamento è semplice: basta applicare questa funzione all'evento di cui si vuole tracciare il completamento, ed impostare il corpo della funzione restituita a seconda dell'operazione che vogliamo compiere. Nel caso dello scrolling l'autore ha inserito:

executionTimer = setTimeout(function() {
 $("onScrollEndDemoDiv").set("text", "Executed " + (++count) + " times.");
}, delay);

in modo da tracciare il numero di scrolling "effettivi" realizzati dall'utente.