Как jQuery выполняет свои асинхронные анимации?
... или более конкретно, как могут они для создания анимаций с помощью JavaScript, который синхронен, не держа следующее положение JavaScript.
Это - просто любопытство. Они используют цепочку setTimeout()? Если так, они установлены рано, каждый с немного более долгой продолжительностью, чем предыдущее, и хождение параллельно? Или они создают через вызов рекурсивной функции, поэтому работая последовательно?
Или это - что-то совершенно другое?
3 ответа
Существует альтернатива setTimeout (), называемая setInterval (), которая будет вызывать функцию, которую вы передаете в качестве аргумента, через равные промежутки времени. Вызов setInterval вернет значение, которое можно передать в clearInterval, чтобы остановить вызов функции.
Цепочка вызовов setTimeout на самом деле не является "рекурсивной". Если одна функция setTimeout, будучи вызванной, устанавливает другой таймаут с собой в качестве обработчика, то к моменту наступления нового таймаута первоначальный вызов будет уже давно завершен.
Использование setTimeout вместо setInterval (на мой взгляд) часто более гибко, поскольку позволяет коду с таймаутом адаптироваться (и, возможно, отменять) самостоятельно. Общая схема заключается в создании замыкания вокруг вызова setTimout, чтобы данные, необходимые процессу таймаута (анимации, если вы делаете именно это), были доступны и изолированы от остальной части приложения. Затем таймаут запускается при первом запуске.
Внутри обработчика таймаута можно использовать "arguments.callee", чтобы он ссылался на себя и сбрасывал таймаут для последующих "кадров"
.С jQuery 1.4.2 в строках 5534 - 5536:
if ( t() && jQuery.timers.push(t) && !timerId ) {
timerId = setInterval(jQuery.fx.tick, 13);
}
Обратите внимание на setInterval для метода jQuery tick , который запускает шаг в анимации.