Al fine di creare applicazioni web che rispondano sempre meglio alle azioni degli utenti è necessario calibrare al meglio il codice jQuery e JavaScript al fine di ottimizzare il nostro codice. Calcolare la durata della pressione del bottone del mouse potrebbe sembrare un futile esercizio di stile. In realtà si rivela molto utile, in quanto può essere esteso ad altre azioni (come per esempio i menu a discesa) per migliorare i tempi di risposta della nostra applicazione. Vediamo insieme l'esempio.
Ci interessano due eventi in particolare: mousedown e mouseup, ossia quando il bottone del mouse viene premuto e quindi rilasciato. Creeremo un timer JavaScript che incrementerà un contatore ogni secondo (1000 millisecondi) sul primo evento e che verrà quindi resettato sul secondo. In questo esempio utilizzo i secondi, ma per risultati migliori vi consiglio di utilizzare i millisecondi:
$(function() {
var counter = 0;
$('#test').bind('mousedown mouseup', function(event) {
var evtType = event.type;
switch(evtType) {
case 'mousedown':
var interval = setInterval(function() {
counter++;
}, 1000);
break;
case 'mouseup':
clearInterval(interval);
var seconds = (counter == 1) ? 'secondo' : 'secondi';
alert('Hai premuto il bottone del mouse per ' + counter + ' ' + seconds);
break;
default:
break;
}
});
});
Tramite la proprietà type dell'oggetto Event possiamo stabilire quale evento è attualmente in esecuzione e quindi associargli una particolare azione. Ripeto: per risultati più affidabili utilizzate i millisecondi.
Potete visionare l'esempio finale in questa pagina.