闭包在动画帧调度中保存每帧物理状态，通过捕获位置、速度等变量实现独立运动上下文，避免共享干扰；需隔离循环变量、结合时间戳计算Δt提升精度，并提供cancel机制防止内存泄漏。

闭包在动画帧调度中保存每一帧物理运动状态，核心是利用函数作用域“捕获并持久化”当前帧的状态变量（如位置、速度、加速度），使 requestAnimationFrame 回调每次执行时都能访问到属于该动画实例的独立状态，而非共享或覆盖的全局值。

用闭包封装独立的运动上下文

每个动画对象（比如一个小球）应有自己的一套状态变量。闭包让这些变量不被外部干扰，也不随其他动画重置：

• 把初始状态（x, v, a）定义在启动函数内部
• 返回一个只读取/更新这些变量的 render 函数，并传给 requestAnimationFrame
• 多次调用启动函数，会生成多个互不影响的闭包环境

例如：

<!-- 每次调用 createMover 都生成新闭包，保存各自的状态 -->
function createMover(x0, v0, a = 0.2) {
  let x = x0, v = v0;
  return function render(now) {
    v += a;
    x += v;
    // 更新 DOM 或 Canvas
    el.style.left = x + 'px';
    requestAnimationFrame(render);
  };
}
const anim1 = createMover(0, 0);
const anim2 = createMover(100, -2); // 完全独立的速度和起始点

避免闭包中意外捕获循环变量

在批量创建多个动画时（如 for 循环中），若直接引用循环变量，所有闭包会共享最后一轮的值。必须用闭包隔离每轮迭代：

javascript-pro

专注现代 ECMAScript、异步编程、性能优化和全栈的 JavaScript 专家，适用于现代开发

下载

立即学习“Java免费学习笔记（深入）”；

• 错误写法：for (let i = 0; i console.log(i)); } —— 这里用 let 是安全的；但若用 var 就会全部输出 3
• 更稳妥做法：显式用 IIFE 或箭头函数参数绑定当前帧状态：arr.forEach((state, i) => createMover(state.x, state.v))

结合时间戳做帧间增量计算（更精确的物理模拟）

单纯依赖帧率会导致快慢不一。闭包可保存上一帧时间戳，结合 now 参数算出真实经过时间 Δt：

function createTimedMover(x0, v0, a = 0.2) {
  let x = x0, v = v0;
  let lastTime = 0;
  return function render(now) {
    if (!lastTime) lastTime = now;
    const dt = (now - lastTime) / 1000; // 秒为单位
    v += a * dt;
    x += v * dt;
    lastTime = now;
    el.style.left = x + 'px';
    requestAnimationFrame(render);
  };
}

清理与生命周期控制（防止内存泄漏）

闭包会持续持有状态，若动画停止却不解除引用，状态就一直驻留内存。需提供取消机制：

• 在闭包内保存 animationId，暴露 cancel 方法
• 使用 AbortController（现代方式）或布尔标志位控制是否继续递归调用
• DOM 元素移除时，务必手动调用 cancel

function createCancelableMover(x0, v0) {
  let x = x0, v = v0;
  let id = null;
  let active = true;
  function render() {
    if (!active) return;
    v += 0.1; x += v;
    el.style.left = x + 'px';
    id = requestAnimationFrame(render);
  }
  return {
    start() { render(); },
    stop() { active = false; cancelAnimationFrame(id); }
  };
}