JavaScript: aggiungere un ritardo all’evento keyup()

luca 17/06/2013 0

Durante lo sviluppo di una applicazione AJAX, capita spesso di utilizzare l’evento onkeyup(), che viene eseguito ogni volta che l’utente rilascia un tasto della tastiera.

Pensiamo ad esempio ad una funzione di auto-completamento: ogni volta che l’utente inserisce un carattere nel campo, l’applicazione via JavaScript interroga il server inviando il testo digitato per ottenere dei suggerimenti:

A volte – per evitare di eseguire troppe volte la funzione legata all’evento onkeyup() – può essere utile definire un tempo di attesa; trascorso il quale, se l’utente non ha inserito un nuovo carattere, viene effettivamente invocata la funzione.

Definiamo nel codice JavaScript una nuova funzione, delay():

var delay = (function () {
	var timer = 0;
	return function (callback, ms) {
		clearTimeout(timer);
		timer = setTimeout(callback, ms);
	};
})();

delay() riceve in input la effettiva funzione da chiamare e il tempo di attesa in millisecondi.

Vediamo come utilizzarla. Se vogliamo chiamare la funzione myKeyUpFunction() se sono trascorsi almeno 250ms dalla pressione di un tasto nel campo mySearchBox possiamo scrivere questo codice:

$(mySearchBox).keyup(function() {
 
		delay(myKeyUpFunction, 250);
}

Leave A Response »