requestAnimationFrame和setInterval区别

### requestAnimationFrame 和 setInterval 的区别

`requestAnimationFrame` 是一种专门用于处理动画的方法，浏览器会在下一次重绘之前调用指定的回调函数[^1]。这使得 `requestAnimationFrame` 能够更高效地管理帧率并节省资源。

相比之下，`setInterval` 提供了一种基于固定时间间隔执行代码的方式。然而这种方式并不考虑屏幕刷新周期，可能导致不必要的计算或错过最佳渲染时机[^2]。

#### 使用示例对比

##### 使用 `setInterval`

当使用 `setInterval` 创建动画时，可能会遇到性能问题：

let start = Date.now();
const animateWithSetInterval = () => {
    let timePassed = Date.now() - start;
    // 更新 DOM 或者其他操作...
};
// 假设每秒更新 60 次
setInterval(animateWithSetInterval, 1000 / 60);

这种方法无法精确控制实际绘制的时间点，并且在高负载情况下容易造成卡顿效果。

##### 使用 `requestAnimationFrame`

而采用 `requestAnimationFrame` 则可以更好地同步到显示器的实际刷新频率上：

let startTime = null;
function animateWithRequestAnimationFrame(currentTime) {
    if (!startTime) startTime = currentTime;

    const elapsedTime = currentTime - startTime;
    
    // 执行动画逻辑...

    // 请求下一帧继续循环
    window.requestAnimationFrame(animateWithRequestAnimationFrame);
}
window.requestAnimationFrame(animateWithRequestAnimationFrame);

此方法不仅提高了效率还减少了电量消耗，在移动设备上的表现尤为明显[^3]。