requestAnimationFrame + 数值插值可实现轻量可控的数字滚动动画；因与屏幕刷新同步、页面失焦自动暂停、不累积延迟，比 setInterval 更顺滑省资源，且需保留小数插值再四舍五入显示。
直接用 requestAnimationFrame + 数值插值就能实现轻量、可控的数字滚动动画，不需要引入任何库。
为什么不用 setInterval 做数字递增动画
setInterval 容易因页面失焦、JS 执行阻塞导致计时不准，数字跳变或卡顿；而 requestAnimationFrame 与屏幕刷新同步，更顺滑，且在标签页不可见时自动暂停，省资源。
- 浏览器可能丢帧，但不会“累积延迟”，数值始终按真实经过时间线性插值
- 避免用
parseInt或Math.floor强制取整后突变——应保留小数位做视觉过渡，最后再四舍五入显示 - 若用 CSS
transition动画数字字符串（如 “123” → “456”），本质是文本替换，无法实现平滑递增感
核心函数：用 requestAnimationFrame 实现带缓动的数字滚动
关键不是“每帧加 1”，而是从起始值 start 按时间比例算出当前应显示的中间值：
animateNumber(document.getElementById('counter'), 0, 12345, 1500)
- 提前创建格式器：
const formatter = new Intl.NumberFormat('en-US') - 渲染时：
el.textContent = formatter.format(Math.round(current)) - 不要在循环里反复
new Intl.NumberFormat()，避免内存开销 - 若需兼容 IE，改用正则手动加逗号（
String(num).replace(/\B(?=(\d{3})+(?!\d))/g, ',')），但注意负数和小数点位置
多个计数器同时启动时的注意事项
每个动画必须有独立的 startTime 和闭包状态，不能共用变量。常见错误是把所有计数器塞进同一个 for 循环却没做闭包隔离：
// ❌ 错误：i 被共享，最终全部从最后一个值开始 for (let i = 0; i // ✅ 正确：用立即执行函数或 for...of + const els.forEach((el, i) => animateNumber(el, 0, values[i]));
另外，如果页面加载时计数器不在视口内，建议监听 IntersectionObserver，等元素进入可视区再触发动画，避免无谓计算。
真正难的不是让数字动起来，而是控制好「起始时机」「结束精度」和「格式稳定性」——尤其是当 end 是动态接口返回值、且可能为小数或负数时，Math.round 和格式化逻辑得提前兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
