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

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函数,这是您想要的.