让动画更流畅：requestAnimationFrame 与 setTimeout 的区别

2023-10-09 07:33:00

让动画更流畅：requestAnimationFrame 与 setTimeout 的区别

提到 setTimeout 以及 requestAnimationFrame，大家的第一个反应是动画相关的两个 API。我将会详细剖析这两个 API 的区别，以帮助您了解它们的优缺点以及何时使用它们。

setTimeout 是一个 JavaScript 函数，它允许您在指定的时间后执行一个函数。您可以使用 setTimeout 来创建一个简单的动画，例如，让一个元素在页面上移动。

requestAnimationFrame 也是一个 JavaScript 函数，但它与 setTimeout 不同的是，它不会在指定的时间后执行一个函数。相反，它会将一个回调函数排队，以便在浏览器的下一次重绘之前执行。

这是这两个 API 之间的主要区别。setTimeout 是基于时间的，而 requestAnimationFrame 是基于浏览器的重绘周期的。这意味着 requestAnimationFrame 对于创建流畅的动画更加有效，因为它是与浏览器的刷新率同步的。

何时使用 setTimeout

您应该在以下情况下使用 setTimeout：

当您需要在指定的时间后执行一个函数时。
当您不需要动画与浏览器的刷新率同步时。

何时使用 requestAnimationFrame

您应该在以下情况下使用 requestAnimationFrame：

当您需要创建流畅的动画时。
当您需要动画与浏览器的刷新率同步时。

示例

以下是一个使用 setTimeout 创建简单动画的示例：

// 创建一个元素
var element = document.createElement("div");

// 将元素添加到页面中
document.body.appendChild(element);

// 设置元素的初始位置
element.style.left = "0px";

// 使用 setTimeout 来移动元素
setTimeout(function() {
  // 将元素移动到新的位置
  element.style.left = "100px";
}, 1000);

以上代码将在页面上创建一个元素，然后在 1 秒后将元素移动到新的位置。

以下是一个使用 requestAnimationFrame 创建流畅动画的示例：

// 创建一个元素
var element = document.createElement("div");

// 将元素添加到页面中
document.body.appendChild(element);

// 设置元素的初始位置
element.style.left = "0px";

// 使用 requestAnimationFrame 来移动元素
requestAnimationFrame(function() {
  // 将元素移动到新的位置
  element.style.left = "100px";

  // 再次调用 requestAnimationFrame
  requestAnimationFrame(arguments.callee);
});