时间戳

首页 > 解决方案 > JS递归超出最大调用堆栈大小：2个函数之间的差异

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

问题描述

我正在研究这个例子：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 圈一样）。

为什么我在第二个函数中出现此错误，但在第一个函数中没有？有什么不同？

标签： javascriptd3.jsrecursion

解决方案

您正在调用 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但它没有被使用...

PS 感谢@rioV8 建议绑定回调，我在原始答案中错过了它。

推荐阅读