javascript - 如何在带有参数的函数内部使用 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

您安排一个调用 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));
}

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

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 语法解决方案通常最容易使用，也最适合其他人阅读。