Отличие анимации при использовании requestAnimationFrame и SetInterval

Question

setInterval выполняет функцию с фиксированной задержкой, не учитывая частоту обновления экрана, что может приводить к пропуску кадров и лишним вычислениям. requestAnimationFrame синхронизирует выполнение кода анимации с частотой обновления экрана (обычно 60 кадров/с), что делает анимацию плавной и эффективной. Он также автоматически останавливается, когда пользователь переходит на другую вкладку, экономя ресурсы. Для плавных анимаций всегда следует предпочитать requestAnimationFrame.

YeaHub · Accepted Answer

Анимация — это процесс изменения свойств элемента с течением времени. В JavaScript для этого можно использовать разные таймеры, но они сильно отличаются по своему поведению и эффективности.setIntervalПринцип работы: Запускает функцию повторно через заданный фиксированный интервал времени (в миллисекундах).Проблемы:Несинхронизирован с отрисовкой: Он не знает, когда браузер готов перерисовать страницу. Это может привести к "конфликту" — функция пытается изменить стиль, пока браузер занят отрисовкой, из-за чего кадр пропускается, и анимация дергается.Работа в фоне: Таймер продолжает тикать, даже когда вкладка неактивна, напрасно расходуя заряд батареи и вычислительные ресурсы.// Пример с setInterval (НЕ РЕКОМЕНДУЕТСЯ для анимаций)
const intervalId = setInterval(() => {
	moveElementByOnePixel(); // Двигаем элемент
	if (animationIsComplete) clearInterval(intervalId);
}, 16); // ~60fps (1000ms / 60 ≈ 16ms)requestAnimationFrame (rAF)Принцип работы: Сообщает браузеру, что вы хотите выполнить анимацию. Браузер сам оптимизирует вызов вашей функции, выполняя ее непосредственно перед следующей отрисовкой страницы.Преимущества:Синхронизация: Гарантирует, что ваш код анимации выполняется в идеальный момент для обновления кадра, обеспечивая максимальную плавность.Эффективность: Браузер объединяет все requestAnimationFrame-вызовы в одном кадре, а также приостанавливает анимацию на неактивных вкладках.Точность: Передает в функцию-колбэк метку времени (timestamp), что позволяет точно рассчитывать анимацию, даже если частота кадров плавает.// Пример с requestAnimationFrame (РЕКОМЕНДУЕМЫЙ способ)
function animate(timestamp) {
  // Высчитываем, насколько сдвинуть элемент на основе timestamp
  moveElementBasedOnTime(timestamp);

if (animationIsComplete) return; // Останавливаем анимацию

requestAnimationFrame(animate); // Запрашиваем следующий кадр
}

requestAnimationFrame(animate); // Запускаем анимациюВывод: Для создания плавных, производительных и ресурсоэффективных анимаций всегда используйте requestAnimationFrame. setInterval и setTimeout подходят для задач, не требующих точной синхронизации с отрисовкой (например, периодическая проверка состояния).