Una delle gioie più grandi del mio lavoro è quella di aiutare le persone che mi chiedono consigli e pareri sul codice. Oggi Davide mi ha fatto una domanda specifica sui deferred objects di jQuery: se si utilizza il metodo pipe() per concatenare delle animazioni, come posso far partire un'animazione in ritardo rispetto ad un'altra? Vediamo come.
pipe() è un metodo che racchiude l'esecuzione del codice in uno specifico contesto di esecuzione. Quando questo metodo viene usato in sequenza, ciascun contesto deve aver ultimato la sua esecuzione prima di passare al contesto successivo.
Possiamo usare il metodo JavaScript setTimeout() sull'animazione che vogliamo ritardare:
$(function() {
$.Deferred(function(def) {
def.pipe(function() {
return $('#test').animate({left: 100}, 1000);
}).pipe(function() {
return setTimeout(function() {
$('#test2').animate({left: 100}, 1000);
}, 2000);
});
}).resolve();
});
Come si può notare, la seconda animazione aspetta 2 secondi rispetto alla prima. Potete visionare l'esempio finale in
questa pagina.