I deferred objects di jQuery, introdotti nella versione 1.5, permettono di concatenare azioni in modo sincrono o asincrono creando così una coda di azioni. La loro più naturale applicazione sono le animazioni concatenate, che troppo spesso ci costringono a usare parecchie funzioni annidate. Vediamo insieme i dettagli.
Il metodo tradizionale
Nel metodo tradizionale delle animazioni concatenate usiamo la funzione di callback di ciascuna animazione per creare l'effetto voluto:
$('#test').animate({
left: 500
}, 1000, function() {
$(this).animate({
top: 100
}, 1000, function() {
$(this).animate({
left: 0
}, 1000, function() {
$(this).animate({
top: 0;
}, 1000);
});
});
});
Come si può notare, la leggibilità del codice viene compromessa dal numero di annidamenti richiesti. Possiamo ovviare a questo problema con i deferred objects.
Usare i deferred objects
Creiamo un oggetto e suddividiamo ciascuna animazione in un metodo di tale oggetto:
var Animator = {
element: '#test',
moveTo: function(offset) {
offset = offset || 0;
$(Animator.element).animate({
left: offset
}, 1000);
},
moveDown: function() {
$(Animator.element).animate({
top: 100
}, 1000);
},
moveUp: function() {
$(Animator.element).animate({
top: 0
}, 1000);
}
};
Quindi usiamo i metodi $.when() e then() dei deferred objects con i metodi appena creati:
$('#test').click(function() {
$.when(Animator.moveTo(500), Animator.moveDown())
.then(function() {
Animator.moveTo();
Animator.moveUp();
});
});
Grazie a questi due metodi il codice è molto più conciso e leggibile e l'effetto finale è quello voluto. Potete visionare l'esempio finale in questa pagina.