Ritardare l’esecuzione degli eventi con Javascript
Mercoledì 29 Ottobre 2008 - 08:29
di Riccardo Degni
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.
Categoria: Scripting | Permalink
sponsor
Commenti
1
Ho letto l’articolo proprio ieri su ajaxian. L’autore ha creato una pagina con 6 eventi e ha replicato 6 volte lo stesso codice solamente perchè cambiava la funzione da eseguire nel setTimeout.
Quel codice può essere facilmente ottimizzato, consentendo di passare la funzione da eseguire come argomento alla funzione on<qualsiasievento>EndFunc (e magari il tempo di timeout)
# - postato da Fabrizio Calderan - 29 Ottobre 2008 - 09:48
2
bello spunto!
grazie per la segnalazione Riccardo :)