La situazione più classica in cui ci ritroviamo a frugare per ore ed ore nella documentazione di jQuery riguardo all’uso delle funzioni bind() e unbind() è in fase di realizzazione di uno slider, solitamente di immagini. In questa circostanza il problema che si solleva frequentemente è: come faccio ad evitare che un utente, cliccando velocemente sulle frecce di navigazione, mandi in tilt il mio slider? Come faccio a prevenire click multipli non desiderati?
A tutte queste domande esiste una risposta!
Disabilitare un pulsante finchè un’animazione non è terminata
Il codice necessario sarà davvero minimo e facile da ricordare! Ottimo no?
Il markup HTML della demo
<a id="sposta" href="javascript:void(0);">Sposta l'oggetto verso destra</a><br /> <div id="box"></div>
Questo sarà sufficiente! Un pulsante, un oggetto che si sposta. Stop! 🙂
CSS dell’esempio
#box {
position:absolute;
top:80px;
background:#f90;
width:100px;
height:100px;
}L’importante è che il nostro oggetto abbia delle dimensioni no? Non soffermiamoci oltre in dettagli… Vediamo ciò che invece realmente interessa alla nostra causa! Impediamo che la smania di click distrugga ore ed ore di nostro lavoro 🙂
Questo è lo script intero, analizziamolo passo passo:
$(document).ready(function() {
$('#sposta').bind('click', spostaBox);
function spostaBox(e) {
e.preventDefault();
$('#sposta').unbind();
$('#box').animate({
left: '+=80px'},{
duration: 500,
complete: function() {
$('#sposta').bind('click', spostaBox);
}
});
}
});Spiegazione dello script
La funzione bind permette di attaccare ad un elemento un comportamento. Nel nostro caso l’elemento è il pulsante, il comportamento è il click. Eseguiamo quindi la funzione spostaBox. Attraverso la funzione preventDefault() si cancella un evento (la ri-esecuzione della funzione) senza stoppare però la propagazione dell’evento stesso. Il codice quindi viene letto e la funzione eseguita.
Utilizziamo quindi la funzione unbind() per disabilitare i fatidici click multipli ed effettuiamo quindi finalmente l’animazione desiderata. Grazie alla proprietà complete della funzione animate() possiamo eseguire una callback al termine dell’animazione; quando l’animazione sarà conclusa infatti ri-abilitiamo il click ed in questo modo sblocchiamo nuovamente l’azione. Riepilogando quindi non abbiamo fatto altro che far sì che appena un utente clicca sul pulsante, finchè tutta la funzione non sarà stata eseguita, qualsiasi click esegua venga annullato!
In questo modo, per esempio realizzando un carousel o uno slider, possiamo far sì che le immagini si muovano progressivamente e dello spazio preimpostato senza che quindi vi siano fattori che creino problemi di visualizzazione!
E voi, quante volte vi siete trovati in questa situazione? Come ne siete usciti?
