Что использовалось для анимации до requestAnimationFrame

До requestAnimationFrame использовались setTimeout и setInterval для создания анимаций.

Проблемы:

• Нет синхронизации с частотой обновления экрана (обычно 60 Гц), что приводит к рывкам или пропуску кадров.
• Анимации продолжают работать даже когда вкладка неактивна, тратя ресурсы.

Пример с setTimeout:

function animate() {
  // Логика анимации
  element.style.left = (parseInt(element.style.left) + 1) + 'px';
  setTimeout(animate, 16); // ~60 кадров/сек (1000/60 ≈ 16 мс)
}
animate();

Пример с setInterval:

const intervalId = setInterval(() => {
  element.style.left = (parseInt(element.style.left) + 1) + 'px';
}, 16);

Недостатки:

• Точность таймеров в браузерах не гарантирована (может быть задержка).
• Нет оптимизации под железо (например, отключение при скрытой вкладке).