如何在带参数的函数内部使用 requestAnimationFrame？

Question

我试图为很多 svg 路径制作动画，但功能不起作用

错误：

Uncaught RangeError: Maximum call stack size exceeded

 function dashOffset(selector, dashStart, dashFinish, speed) {
    if (offsetStart >= offsetFinish){
        selector.style.strokeDashoffset = offsetStart;
        offsetStart -= speed;
    } else{
        return
    }
    requestAnimationFrame(dashOffset(selector, dashStart, dashFinish, speed));
}

使用全局变量效果完美

Answer 1

必须延迟而不是直接调用，例如

requestAnimationFrame(() => dashOffset(selector, dashStart, dashFinish, speed));

Answer 2

您安排了一个调用 dashOffset 的函数，您没有调用 dashOffset 本身：

function dashOffset(selector, dashStart, dashFinish, speed) {
  // ...
  requestAnimationFrame(function() {
    dashOffset(selector, dashStart, dashFinish, speed);
  });
}

或者用ES6语法，

function dashOffset(selector, dashStart, dashFinish, speed) {
  // ...
  requestAnimationFrame(() => dashOffset(selector, dashStart, dashFinish, speed));
}

或者，如果您的参数永远不会改变，您可以显式预绑定所有值：

function processOffset(selector, dashStart, dashFinish, speed) {
  // ...no request here...
}

// and in some other part of your code (probably inside wherever
// you have the actual argument instantiation available:
var runOffset = processOffset.bind(this, selector, dashStart, dashFinish, speed);
requestAnimationFrame(runOffset);

此处 bind() 生成一个新函数，它具有运行上下文 ("this") 以及任意数量的调用参数 pre-filled。

但是，ES6 语法解决方案通常最容易使用，也最适合其他人阅读。

如何在带参数的函数内部使用 requestAnimationFrame？

How to use requestAnimationFrame inside function with arguments?

javascript

svg

requestanimationframe

svg-animate