Как jQuery выполняет свои асинхронные анимации?

Question

... или, более конкретно, как они могут создавать анимацию с помощью javascript, который является синхронным, без удержания следующего оператора javascript.

Это просто любопытство. Они используют цепочку setTimeout()? Если да, установлены ли они рано, каждый с немного большей продолжительностью, чем предыдущий, и работает параллельно? Или они создаются с помощью рекурсивного вызова функции, поэтому выполняются последовательно?

Или это что-то совершенно другое?

Answer 1

С помощью jQuery 1.4.2 в строках 5534 - 5536:

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

Обратите внимание на setInterval для метода jQuery tick, который запускает шаг анимации.

Answer 2

Существует альтернатива setTimeout (), называемая setInterval (), которая будет вызывать функцию, которую вы передаете в качестве аргумента через равные промежутки времени. Вызов setInterval вернет значение, которое может быть передано clearInterval, чтобы остановить вызов функции.

Answer 3

Цепные вызовы setTimeout на самом деле не являются "рекурсивными". Если одна функция setTimeout, при вызове, устанавливает другой тайм-аут с самим собой в качестве обработчика, исходный вызов будет долго уйти к тому времени, когда наступит новый таймаут.

Использование setTimeout вместо setInterval (для меня) часто более гибко, поскольку позволяет самому временному коду адаптироваться (и, возможно, отменяться). Общий шаблон заключается в том, чтобы установить замыкание вокруг вызова setTimout так, чтобы данные, необходимые для синхронизированного процесса (анимация, если это то, что вы делаете), были доступны и изолированы от остальной части приложения. Затем тайм-аут запускается при первом запуске.

Внутри обработчика времени ожидания «arguments.callee» может использоваться для обращения к себе и сброса времени ожидания для последующих «кадров».