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();时，我有了一个Maximum call stack size exceeded。我试图用一个int来解决这个问题，我每转一圈就增加一次（就像我想做10转一样）。

为什么第二个功能出现此错误，而第一个却没有？有什么区别？

Answer 1

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

代替Mike Bostock的示例，他只是将引用传递给transition函数：

  .each("end", transition);

您需要绑定回调到引用的函数：

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

bind的第一个参数是this的引用，但未使用...

P.S。感谢@ rioV8建议绑定一个回调，我在原始答案中错过了它。

JS递归超出最大调用堆栈大小：2个函数之间的差异

1 个答案: