2016-01-27 29 views
6

Dire che ho qualche elemento che voglio animare:jQuery concatenamento vs. callback per le funzioni di animazione

$('.hey').show(1000).slideUp(1000); 

Qual è la differenza tra questo e:

$('.hey').show(1000, function() { 
    $(this).slideUp(1000); 
}); 

in termini di ciò che accade internamente? Per quanto ne so, le animazioni sono asincrone in jQuery. Pertanto, il primo esempio, show e slideUp deve essere attivato contemporaneamente. Nel secondo, slideUp deve essere attivato solo dopo che show termina.

Eppure, per qualche motivo, persone come on this answer dicono che sono "uguali". Perché sono uguali nonostante il (ovvio) fatto che funzionano in modo diverso (nel primo esempio, il ritorno avverrà immediatamente, a differenza del secondo)?

+1

In JavaScript, in qualsiasi circostanza, il ritorno sarà immediato ('Scusa infinita durante i cicli') – Rayon

+1

@Satpal' show (duration) 'usa anche la coda fx, solo non' show() 'senza alcun parametro passato perché comunque è sync –

risposta

5

Eppure, per qualche motivo, a persone come questa risposta si dice che sono "uguali".

Hai ragione, non lo sono. C'è una differenza particolarmente grande tra di loro se più di un elemento corrisponde a .hey. Ma con il tuo codice citato, anche se la sequenza di passaggi che seguono è diversa, finisce allo facendo lo stesso.

Perché sono gli stessi nonostante il (ovvio) fatto che funzionano in modo diverso (nel primo esempio, il ritorno avverrà immediatamente, a differenza del secondo)?

In entrambi gli esempi, il codice viene eseguito e completato ("restituisce") immediatamente.

Nel primo esempio, la chiamata a slideUp avviene immediatamente ma jQuery maniglie quella chiamata aggiungendo l'animazione slideUp alla fine della coda animazione e ritorno; l'effettiva slide-up si verifica più tardi, quando viene raggiunta nella coda di animazione.

Nel secondo esempio, la chiamata a show si verifica immediatamente e quindi, al termine dell'animazione, viene effettuata la chiamata a slideUp.

La differenza fondamentale quando più elementi di abbinare il vostro selettore è che nel primo esempio, c'è uno chiamata a slideUp, che aggiunge l'operazione slideUp alla coda di animazione per l'attuale serie di elementi dell'oggetto jQuery hai chiamato su. Nel numero secondo, ci sono più chiamate alla richiamata di completamento, una per ciascun elemento al suo completamento.

Un'altra differenza molto importante è stato evidenziato da Arun P Johny in the comments: Se si dovesse aggiungere un'altra funzione animazione a quegli stessi elementi più tardi, con il primo esempio sarebbe aggiunto alla coda dopo il slideUp, ma in il secondo esempio il slideUp sarebbe dopo l' quell'altra animazione.

Ma con il tuo codice citato, ancora una volta, mentre prendono strade diverse per arrivarci, finiscono per fare più o meno la stessa cosa.

+3

Penso che ci sia un'altra differenza che presuppone che ci sia un altro gestore di eventi che viene eseguito mentre l'animazione dello show è in esecuzione e aggiunge un'altra animazione ora l'ordine delle animazioni cambia in entrambi i casi ... nel primo caso la nuova animazione sarà succede dopo la diapositiva, ma in secondo luogo accadrà prima - era solo aggiungendo come risposta –

+0

@ArunPJohny: Ottimo punto! –

+1

probabilmente potresti aggiungerlo alla tua risposta ... –