setInterval 和 requestAnimationFrame 的异同

当我们为网页添加一些动态效果时，都需要用到计时器。而 JavaScript 中最常见的两个计时器函数便是 setInterval 和 requestAnimationFrame。

这两个函数都可用来在指定的时间间隔内重复执行某段代码。但它们之间也存在一些关键的区别。

setInterval

setInterval 函数的用法非常简单，只需传入两个参数：要执行的函数和执行的时间间隔（毫秒）。函数就会按照设定的时间间隔不断重复执行，直到调用 clearInterval() 函数将其清除。

setInterval 的一个主要优点是简单易用。但它也存在一些缺点：

• 执行时间不准确：setInterval 并不是一个精确的计时器。它只保证函数会在指定的时间间隔内执行一次，但具体执行时间可能会有所偏差。
• 效率低下：setInterval 会在指定的间隔内不断执行函数，即使在没有必要的时候也是如此。这可能会导致性能问题，尤其是当函数需要执行大量计算时。

requestAnimationFrame

requestAnimationFrame 函数是 HTML5 中引入的新计时器函数。它与 setInterval 不同，requestAnimationFrame 不会在指定的间隔内不断执行函数。它只会当浏览器准备重绘页面时执行函数。

requestAnimationFrame 的这种特性使得它非常适合用于动画和游戏开发。因为它只会当浏览器准备重绘页面时执行函数，所以它可以确保动画和游戏以流畅的速度运行。

requestAnimationFrame 也比 setInterval 更高效。因为它只会在浏览器准备重绘页面时执行函数，所以它可以减少不必要的函数调用，从而提高性能。

相同之处

• setInterval 和 requestAnimationFrame 都是 JavaScript 中的计时器函数。
• 它们都可用来在指定的时间间隔内重复执行某段代码。

不同之处

• setInterval 会在指定的间隔内不断执行函数，即使在没有必要的时候也是如此。
• requestAnimationFrame 只会在浏览器准备重绘页面时执行函数。
• setInterval 不准确，requestAnimationFrame 更准确。
• setInterval 效率低下，requestAnimationFrame 更高效。

应用场景

• setInterval 适合用于需要在指定的时间间隔内不断执行某段代码的任务，例如轮播图、倒计时等。
• requestAnimationFrame 适合用于动画和游戏开发，因为它可以确保动画和游戏以流畅的速度运行。