如何使用setInterval实现精确指定时长的数字滚动动画

原有代码问题根源 #

• 步长计算逻辑错误：原代码以1ms为间隔计算步长，用Math.floor取整会丢失精度，目标值较小时步长会直接算为0，导致动画失效。
• 定时器误差不可控：setInterval即使设置1ms间隔，受浏览器事件循环机制限制，实际执行间隔最小约4ms，累计误差会随执行次数增加不断变大，最终总时长完全偏离设定值。
• 执行逻辑有漏洞：判断当前值达到目标值后没有终止函数执行，仍会多执行一次赋值和步长累加，导致数值溢出、定时器清除不及时。
• 实现思路缺陷：靠固定步长累加的方式完全无法绑定时间进度，只要定时器间隔存在波动，总时长就不可能精准。
• 细节不规范：jQuery的each方法回调参数顺序为(索引, 当前元素)，原代码参数顺序写反，仅因为全程用this获取当前元素才没有触发报错。

最优实现方案 #

核心思路是放弃固定步长累加逻辑，基于实际时间流逝的百分比计算当前显示值，用浏览器原生的requestAnimationFrame做动画调度，和渲染帧率同步，从根源上消除时间误差。

完整可运行代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class='numbers'>7586</span>
<span class='numbers'>147520</span>

jQuery('.numbers').each(function() {
  const $obj = jQuery(this);
  const targetValue = parseInt($obj.text(), 10);
  const duration = 4000; // 自定义总动画时长，单位：毫秒
  let startTime = null;

  // 初始值置0
  $obj.text(0);

  // 动画帧更新逻辑
  function countStep(timestamp) {
    if (!startTime) startTime = timestamp;
    // 计算已流逝时长
    const elapsed = timestamp - startTime;
    // 计算当前动画进度，最大为1（即100%）
    const progress = Math.min(elapsed / duration, 1);
    // 按进度计算当前显示的数值，做整数取整
    const currentVal = Math.floor(progress * targetValue);
    $obj.text(currentVal);

    if (progress < 1) {
      // 进度未完成，继续调度下一帧
      requestAnimationFrame(countStep);
    } else {
      // 动画结束，强制赋值为精确目标值，消除取整误差
      $obj.text(targetValue);
    }
  }

  // 启动动画
  requestAnimationFrame(countStep);
});

方案优势 #

• 时长绝对精准：动画总时长完全和设置的duration参数一致，不受浏览器帧率波动、后台标签页节流等因素影响。
• 无内存泄漏风险：不需要手动管理定时器，动画结束后自动停止递归，不会出现定时器残留问题。
• 动画更流畅：和浏览器原生渲染节奏同步，不会出现掉帧、数值跳变的问题。
• 适配性强：不管目标数值是大是小，都能自动适配步长，不需要手动调整计算规则。

内容的提问来源于stack exchange，提问作者Bellash