当前位置：首页 > news >正文

requestAnimationFrame 和定时器的含义，使用场景及区别

news 来源：原创 2025/6/9 6:31:16

requestAnimationFrame和定时器都是JavaScript中用于控制代码执行时机的工具，但它们在实现原理、应用场景以及性能表现上存在显著差异。

requestAnimationFrame

含义‌：

requestAnimationFrame是一个专门为处理动画设计的API。它利用浏览器的重绘机制（Repaint）来实现高效的动画渲染。

使用场景‌：

平滑动画效果：requestAnimationFrame确保动画在浏览器的刷新频率（通常是60次每秒）下运行，避免了使用setTimeout或setInterval可能带来的卡顿和不一致性。
滚动事件处理：在滚动事件中使用requestAnimationFrame来处理滚动相关的操作（如懒加载、无限滚动等），可以避免频繁的DOM操作导致的性能问题。
游戏开发：在游戏开发中，requestAnimationFrame用于实现游戏循环，以确保游戏在每一帧都能更新和渲染。

特点：

高精度控制：由于绑定到浏览器的重绘机制，requestAnimationFrame能够提供更高的执行频率和更精确的动画控制。
自动优化：当页面不可见（如标签页被切换）时，requestAnimationFrame会暂停执行，从而节省资源。
资源友好：仅在页面可见时执行，减少不必要的计算。

定时器（setTimeout和setInterval）

含义‌：

JavaScript中的定时器主要通过setTimeout和setInterval实现。它们的基本功能是按照指定的时间间隔执行一段代码。

‌使用场景‌：

倒计时功能：通过setInterval或setTimeout实现倒计时效果。
数据轮询：定期从服务器获取数据，如使用setInterval每隔一定时间发送请求。
非实时任务：例如监听页面尺寸变化后延迟执行某些操作，可以使用setTimeout。

特点：

灵活性：可以设置任意时间间隔。
简单易用：API简单，适合处理非实时、非连续的任务。
低精度：定时器的执行时间并非绝对精确，系统负载高时，回调函数可能会被延迟执行。浏览器最小化或标签页非激活状态下，setTimeout和setInterval的精度会降低。

区别

执行时机‌：requestAnimationFrame会在浏览器下一次重绘之前调用指定的回调函数，而定时器则按照指定的时间间隔执行回调函数。
‌应用场景‌：requestAnimationFrame更适合处理需要精确控制帧率的场景（如动画、游戏开发），而定时器更适合处理非实时任务（如倒计时、轮询等）。
‌性能表现‌：requestAnimationFrame能够提供更流畅的效果，因为它与浏览器的刷新频率同步，而定时器可能会因为系统负载或页面状态（如最小化或标签页非激活）而导致执行时间不准确。

使用示例：

我们将创建一个方块，它会在页面上水平移动，并且这个移动会在一定时间后停止。我们将使用requestAnimationFrame来处理平滑的动画效果，而使用setTimeout来设置一个定时器，当动画持续时间到达后停止动画。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Combined requestAnimationFrame and Timer Example</title>
<style>
  #box {
    width: 50px;
    height: 50px;
    background-color: red;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
  }
  .container {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    position: relative;
  }
</style>
</head>
<body>
<div class="container">
  <div id="box"></div>
</div>
<script>
  const box = document.getElementById('box');
  let position = 0;
  let animationFrameId;
  const animationDuration = 5000; // 动画持续时间，单位为毫秒
  const speed = 2; // 方块移动的速度，单位为像素/毫秒

  function animate() {
    position += speed; // 更新位置
    box.style.left = `${position}px`; // 设置新位置

    // 请求下一帧动画
    animationFrameId = requestAnimationFrame(animate);
  }

  // 启动动画
  function startAnimation() {
    // 清除之前可能存在的动画帧请求
    cancelAnimationFrame(animationFrameId);
    position = 0; // 重置位置
    box.style.left = '0px'; // 重置CSS样式

    // 开始动画循环
    animate();

    // 设置定时器在动画持续时间后停止动画
    setTimeout(() => {
      cancelAnimationFrame(animationFrameId); // 停止动画
      console.log('Animation stopped.');
    }, animationDuration);
  }

  // 添加一个按钮来启动动画（此处省略按钮的HTML和点击事件绑定代码，仅调用startAnimation函数）
  // 例如：<button onclick="startAnimation()">Start Animation</button>

  // 为了演示，我们直接调用startAnimation函数
  startAnimation();
</script>
<!-- 注意：在实际应用中，您可能希望将startAnimation函数的调用放在某个事件监听器中，比如按钮点击事件。 -->
</body>
</html>