In che modo jQuery realizza le sue animazioni asincrone?

Question

... o più specificamente, come sono in grado di creare animazioni tramite javascript, che è sincrono, senza ostacolare la successiva istruzione javascript.

È solo una curiosità. Stanno usando una catena di setTimeout()? Se è così, sono impostati in anticipo, ognuno con una durata leggermente superiore rispetto al precedente e correndo in parallelo? Oppure vengono creati attraverso una chiamata ricorsiva, quindi in esecuzione in serie?

Oppure è qualcosa di completamente diverso?

Answer 1

C'è un'alternativa a setTimeout() chiamata setInterval() che chiamerà la funzione passata come argomento a intervalli regolari. La chiamata a setInterval restituirà un valore che può essere passato a clearInterval per impedire che la funzione venga chiamata.

Answer 2

Con jQuery 1.4.2 sulle linee 5534 - 5536:

if (t() && jQuery.timers.push(t) && !timerId) { 
    timerId = setInterval(jQuery.fx.tick, 13); 
} 

Avviso il setInterval per il metodo di jQuery tick che fa scattare un passo in un'animazione.

Answer 3

Le chiamate concatenate a setTimeout non sono realmente "ricorsive". Se una funzione setTimeout, quando viene chiamata, imposta un altro timeout con se stesso come gestore, l'invocazione originale sarà a lungo trascorsa dal momento in cui si verifica il nuovo timeout.

L'utilizzo di setTimeout invece di setInterval è (per me) spesso più flessibile perché consente al codice a tempo di adattarsi (e possibilmente annullarlo). Lo schema generale consiste nell'impostare una chiusura attorno alla chiamata setTimout in modo che i dati necessari al processo a tempo (l'animazione, se è quello che stai facendo) sia disponibile e isolata dal resto dell'app. Quindi il timeout viene avviato nella sua corsa iniziale.

All'interno del gestore di timeout, "arguments.callee" può essere utilizzato per fare riferimento a se stesso e reimpostare il timeout per i "frame" successivi.