javascript - JS 递归超出最大调用堆栈大小 : difference between 2 functions

Question

我正在研究这个例子:https://bl.ocks.org/mbostock/1705868我的目标是添加一个按钮，单击该按钮将绘制一个新圆圈并使其像第一个圆圈一样移动，而无需重置其周期。因此，我用这个函数替换了转换函数，以便能够在参数中的特定圆上调用它:

function transition2(c){
  c.transition() //Default transition function?
    .duration(10000)
    .attrTween("transform", translateAlong(path.node()))
    .each("end", transition2(c));
}

但是当我调用 transition2(circle); 而不是 transition(); 时，我有一个超出了最大调用堆栈大小 。我尝试用一​​个 int 来解决这个问题，每次转动都会递增(就像我想做 10 圈一样)。

为什么我在第二个函数中出现此错误，而在第一个函数中却没有？有什么区别？

Answer 1

您正在调用transition2函数，而不是在“结束”动画监听器中传递对其的引用...

Mike Bostock 的示例只是将引用传递给 transition功能:

  .each("end", transition);

您需要一个绑定(bind)回调来引用函数:

function transition2(c){
  c.transition() //Default transition function?
    .duration(10000)
    .attrTween("transform", translateAlong(path.node()))
    .each("end", transition2.bind(null, c));
}

bind 的第一个参数是 this 的引用但没有使用...

附注感谢@rioV8建议绑定(bind)回调，我在原始答案中错过了它..