为什么事件监听器回调函数只在函数范围内工作？

Question

我正在开发一个使用事件监听器的D3项目，每隔几毫秒就会调用一次事件监听器来更新/动画屏幕上圆圈的位置。

它从函数startForces（）开始调用一次以激活D3力，然后我们将它传递给圆圈。

当回调函数（勾选）位于startForces（）范围之外时，该函数似乎只调用一次，并且圆圈在页面上显示为静态。 （见顶级代码）

但是，当回调函数（勾选）位于startForces（）的范围内时，一切都按预期工作，并且圆圈显示为动画。 （BOTTOM CODE CHUNK）

我试图理解为什么javascript以这种方式工作。为什么顶级代码不起作用，底部代码有效？

TL：DR

不工作的代码

var ticked = function(circles){
   circles.attr('cx', function(d) { return d.x })
   .attr('cy', function(d) { return d.y })
}

var startForces = function(data, circles) {
  simulation.nodes(data)
  .on('tick', ticked(circles))
}

=====

工作代码

    var startForces = function(data, circles) {
      simulation.nodes(data)
      .on('tick', ticked)

    function ticked(){
      circles.attr('cx', function(d) { return d.x })
      .attr('cy', function(d) { return d.y })
    }
   }

为什么会有差异？

Answer 1

它实际上与函数的位置无关。

执行此操作时：

.on('tick', ticked(circles))

您在创建ticked侦听器时立即呼叫on。然后，您将tick的回调分配为使用圈子ticked调用undefined的结果。

执行此操作时：

.on('tick', ticked)

您将回调分配为ticked功能，这就是您想要的。