Question

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

2018-03-24

139

javascript svg requestanimationframe svg-animate

我尝试为许多 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

您安排了一个调用 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 语法解决方案通常最容易使用，并且对其他人来说也最容易阅读。

Answer 2

必须推迟执行，而不是直接调用，例如

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