Question

我试图为svg路径设置动画，但功能不起作用

错误：

未捕获RangeError：超出最大调用堆栈大小

 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”）以及预先填充的任意数量的调用参数。

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

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

2 个答案: