如何在带参数的函数中使用requestAnimationFrame？SVG动画报错求助

这个问题我之前也碰到过！核心问题出在requestAnimationFrame的调用方式和变量名混淆上，咱们一步步拆解解决：

问题根源 #

1. 无限递归调用：你写的requestAnimationFrame(dashOffset(selector, dashStart, dashFinish, speed))会立刻执行dashOffset函数，而不是把函数引用传给requestAnimationFrame。这就导致函数刚执行完，又立刻触发下一次执行，形成无限递归，直接撑爆调用栈，抛出栈溢出错误。
2. 变量名不匹配：函数参数定义的是dashStart、dashFinish，但内部却用了offsetStart、offsetFinish，这在使用全局变量时能凑合用，但用参数传递时就会导致变量未定义或者逻辑错误。

修正后的代码 #

function dashOffset(selector, offsetStart, offsetFinish, speed) {
  // 先设置当前帧的strokeDashoffset值
  selector.style.strokeDashoffset = offsetStart;

  // 判断是否需要继续执行动画
  if (offsetStart > offsetFinish) {
    // 用箭头函数包裹，让requestAnimationFrame在下一帧才调用函数
    requestAnimationFrame(() => dashOffset(selector, offsetStart - speed, offsetFinish, speed));
  }
}

关键调整说明 #

• 修正变量名：把参数名统一为offsetStart、offsetFinish，和内部使用的变量保持一致，避免混淆。
• 正确传递函数给requestAnimationFrame：用箭头函数包裹dashOffset调用，这样requestAnimationFrame会在下一帧动画周期才执行这个函数，而不是立刻递归调用。
• 调整逻辑顺序：先设置当前帧的偏移量，再判断是否继续动画，确保第一帧就能看到效果。
• 优化终止条件：把>=改成>，避免当偏移量等于目标值时还多执行一次（如果你的需求需要刚好停在目标值，也可以改回>=）。

多SVG路径调用示例 #

现在你可以直接给不同的SVG路径调用这个函数，完全不需要全局变量：

// 获取两个不同的SVG路径元素
const path1 = document.getElementById('svg-path-1');
const path2 = document.getElementById('svg-path-2');

// 分别启动动画，参数可以自定义
dashOffset(path1, 1200, 0, 6);
dashOffset(path2, 900, 0, 4);

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