2010-03-03 13 views
7

... a dokładniej, w jaki sposób są w stanie tworzyć animacje za pośrednictwem javascript, co jest synchroniczne, bez trzymania następnego wyciągu javascript.W jaki sposób jQuery wykonuje swoje asynchroniczne animacje?

To tylko ciekawostka. Czy używają łańcucha setTimeout()? Jeśli tak, to czy są one ustawione wcześniej, z których każdy ma nieco dłuższy czas trwania niż poprzedni i działa równolegle? Czy są one tworzone przez rekursywne wywołanie funkcji, a więc działające w serii?

A może to coś zupełnie innego?

Odpowiedz

6

Istnieje alternatywa dla metody setTimeout() o nazwie setInterval(), która wywoła funkcję, którą przekazujesz jako argument w regularnych odstępach czasu. Wywołanie setInterval zwróci wartość, która może zostać przekazana do clearInterval, aby zatrzymać wywoływanie funkcji.

+0

Ok. Nie brałem pod uwagę 'setInterval()'. Jeśli więc utworzę animację trwającą 1000, czas trwania 'setInterval()' w jQuery jest ustawiany na 1 i jest czyszczony po 1000 wywołań. Czy coś takiego? – user113716

+1

@patrick Tak, to jest coś takiego - interwał prawdopodobnie trwa nieco dłużej niż 1ms i myślę, że IE ma co najmniej 15 ms odstępu. (Nie pamiętam, czy to oznacza, że ​​zaokrągla w dół do 0ms, czy zaokrągla do 15 ms :-) – Pointy

+0

Tak więc przypuszczam, że robią trochę matematyki, dzieląc czas trwania przez minimalne milisekundy, prawdopodobnie dzieląc ponownie przez "odległość" animacji, i przesuwanie elementu docelowego 1px na wywołanie funkcji. Czy to brzmi blisko? – user113716

6

z jQuery 1.4.2 na liniach 5534 - 5536:

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

Zawiadomienie o setInterval dla tick metody jQuery, że wyzwala krok w animacji.

1

Połączone połączenia z setTimeout nie są tak naprawdę "rekurencyjne". Jeśli jedna funkcja setTimeout, gdy zostanie wywołana, ustawia inny limit czasu dla siebie jako procedury obsługi, pierwotne wywołanie będzie dawno już minęło do czasu pojawienia się nowego limitu czasu.

Użycie setTimeout zamiast setInterval jest (dla mnie) często bardziej elastyczne, ponieważ pozwala na dostosowanie kodu czasowego (i ewentualnie anulowanie). Ogólny wzór polega na skonfigurowaniu zamknięcia wokół wywołania setTimout, aby dane potrzebne w procesie czasowym (animacja, jeśli to robisz) są dostępne i odizolowane od reszty aplikacji. Następnie limit czasu jest uruchamiany przy pierwszym uruchomieniu.

Wewnątrz procedury limitu czasu można użyć argumentów "arguments.callee", aby odniosła się do niej i zresetować limit czasu dla kolejnych "ramek".

Powiązane problemy