setTimeout(), setInterval(), and requestAnimationFrame()

Why is requestAnimationFrame ideal for this scroll animation?

function smoothScroll(element, duration) {
  const start = element.scrollTop;
  const change = target - start;
  const startTime = performance.now();

  requestAnimationFrame(function animate(currentTime) {
    const elapsed = currentTime - startTime;
    const progress = Math.min(elapsed / duration, 1);
    
    element.scrollTop = start + change * easeInOutCubic(progress);
    
    if (progress < 1) requestAnimationFrame(animate);
  });
}

It's faster than other methods
It provides precise timing control
It synchronizes with screen updates and provides smooth animation
requestAnimationFrame is ideal here because: 1) Synchronizes scrolling with screen refresh rate, 2) Provides smooth visual updates, 3) Automatically adapts to device capabilities, 4) Optimizes performance and battery life, 5) Prevents visual stuttering, 6) Handles timing calculations efficiently.
It uses less memory

Next Question (20/20)