在浏览器中上演速度与激情的较量：requestAnimationFrame vs. setTimeout 与 setInterval
2023-11-11 05:42:15
requestAnimationFrame、setTimeout 和 setInterval 是 JavaScript 中用于执行延迟操作或定期执行代码的函数。它们在前端开发中广泛应用于动画、游戏、滚动条滚动、轮询等场景。然而，这三个函数之间存在着一些微妙的差异，了解这些差异有助于开发者选择最适合特定任务的函数。
一、requestAnimationFrame
requestAnimationFrame 是一个专门为动画设计的函数。它通过浏览器提供的原生 API 来请求浏览器在下一个渲染周期之前执行一个回调函数。换句话说，requestAnimationFrame 会在浏览器准备更新屏幕之前调用回调函数。
优点 ：
- 与 setTimeout 和 setInterval 相比，requestAnimationFrame 的动画效果更加流畅。这是因为 requestAnimationFrame 会在浏览器准备更新屏幕时调用回调函数，因此可以更好地与浏览器的渲染周期同步。
- requestAnimationFrame 可以有效地防止动画在后台运行时消耗资源。当页面处于非活动状态时，浏览器会暂停动画，以节省计算资源。
缺点 ：
- requestAnimationFrame 不支持延迟执行。这意味着它不能用于执行那些需要在特定时间点执行的任务。
- requestAnimationFrame 只适用于动画。如果需要执行非动画任务，则需要使用 setTimeout 或 setInterval。
二、setTimeout
setTimeout 是一个在指定的时间间隔后执行回调函数的函数。它使用 JavaScript 的内置计时器来实现延迟执行。
优点 ：
- setTimeout 可以延迟执行回调函数，因此可以用于执行那些需要在特定时间点执行的任务。
- setTimeout 的语法简单，易于使用。
缺点 ：
- setTimeout 的动画效果不如 requestAnimationFrame 流畅。这是因为 setTimeout 不与浏览器的渲染周期同步，因此可能会导致动画出现卡顿或掉帧的情况。
- setTimeout 会在后台持续运行，即使页面处于非活动状态也是如此。这可能会浪费计算资源并导致电池电量消耗更快。
三、setInterval
setInterval 与 setTimeout 类似，都是用于执行延迟操作的函数。但是，setInterval 会以指定的间隔不断地执行回调函数，直到明确调用 clearInterval() 函数来停止它。
优点 ：
- setInterval 可以定期执行回调函数，因此可以用于执行那些需要循环执行的任务。
- setInterval 的语法简单，易于使用。
缺点 ：
- setInterval 的动画效果不如 requestAnimationFrame 流畅。这是因为 setInterval 不与浏览器的渲染周期同步，因此可能会导致动画出现卡顿或掉帧的情况。
- setInterval 会在后台持续运行，即使页面处于非活动状态也是如此。这可能会浪费计算资源并导致电池电量消耗更快。
四、总结
requestAnimationFrame、setTimeout 和 setInterval 是 JavaScript 中用于执行延迟操作或定期执行代码的函数。它们在前端开发中广泛应用于动画、游戏、滚动条滚动、轮询等场景。
requestAnimationFrame 适用于动画场景，因为它可以提供流畅的动画效果并有效地防止动画在后台运行时消耗资源。setTimeout 适用于需要在特定时间点执行的任务，例如延迟显示消息框或在指定时间间隔后刷新页面。setInterval 适用于需要循环执行的任务，例如轮询服务器端数据或创建游戏中的计时器。
