JavaScript 中闭包怎么在 Web API RequestAnimationFrame 中保持帧率计算-js教程-PHP中文网

闭包不直接计算帧率，而是封装单帧所需的状态（如startTime、lastTime），使每个动画单元独立、安全地进行时间驱动更新。

javascript 中闭包怎么在 web api requestanimationframe 中保持帧率计算

闭包本身不直接“保持帧率计算”，它也不参与 requestAnimationFrame 的调度或时间测量。它的作用是隔离和封装单帧内需要持续访问的状态，让每个动画单元（比如一个粒子、一个滚动条、一个过渡组件）能独立持有自己的起始时间、上一帧时间戳、累计耗时、进度偏移等变量，从而在 rAF 回调中做稳定、可预测的时间驱动更新。

为什么需要闭包来配合 rAF 做帧率相关计算

rAF 回调函数每次执行都会收到一个 timestamp（高精度毫秒数），但这个值对所有注册的回调在同一帧里是相同的。如果你把 startTime 或 lastTime 声明在全局或模块顶层，多个动画逻辑就会互相干扰；如果写在类实例属性里，又可能被外部误改或在热重载中丢失状态。

闭包提供了一种轻量、安全、无副作用的方式来固化这些时间相关变量：

每个动画实例拥有自己独立的 startTime 和 lastTime
外部无法篡改内部计时状态，只能通过公开方法读取或重置
即使同一段工厂函数被反复调用，也不会产生变量污染

用闭包封装帧率敏感的动画状态

典型场景：实现一个带匀速进度、支持暂停/恢复、自动终止的计时动画。

下面是一个使用闭包封装 startTime、elapsed、isRunning 的例子：

复制代码

js2java

JavaScript 到 Java 全栈翻译助手，专为前端开发者学习 Java 或快速实现后端业务逻辑而设计。当用户提到以下场景时必须使用此技能： - "帮我把这段 JS 代码转成 Java" - "用 Java 怎么写这个逻辑" - "我习惯用 JS 写，想翻译成 Java" - "教我 Java，我要写后端接...

下载

function createTimer(durationMs) {
  let startTime = 0;
  let lastTime = 0;
  let elapsed = 0;
  let isRunning = false;
<p>return {
start() {
if (isRunning) return;
startTime = performance.now();
lastTime = startTime;
isRunning = true;
requestAnimationFrame(tick);
},
pause() {
isRunning = false;
elapsed += performance.now() - lastTime;
},
reset() {
startTime = 0;
lastTime = 0;
elapsed = 0;
isRunning = false;
},
getProgress() {
return Math.min(elapsed / durationMs, 1);
}
};</p><p>function tick(timestamp) {
if (!isRunning) return;</p><pre class="brush:php;toolbar:false;">const delta = timestamp - lastTime;
lastTime = timestamp;
elapsed += delta;

if (elapsed >= durationMs) {
  isRunning = false;
  return;
}

// 这里做实际动画更新，比如 updatePosition(), draw()
requestAnimationFrame(tick);

} }

调用方式：

const timer = createTimer(3000);<br>timer.start(); // 启动一个3秒倒计时<br>console.log(timer.getProgress()); // 随时读取当前进度

避免闭包+ rAF 带来的常见陷阱

虽然闭包帮我们锁定了状态，但如果不注意执行时机和资源管理，依然会掉帧或内存泄漏：

不要在 rAF 回调里做 DOM 查询或样式读取（如 offsetTop、getComputedStyle），这会触发强制同步布局
每个闭包实例都应有明确的销毁路径，比如返回一个 destroy() 方法来清理 cancelAnimationFrame
若需跨帧共享时间基准（例如多个粒子共用同一全局时钟），应显式传入一个外部 sharedClock 对象，而不是让每个闭包都调用 performance.now() —— 减少高频系统调用开销
不要在闭包内直接绑定事件监听器却不解绑；尤其在 React/Vue 等框架中，需配合生命周期钩子清理