我正在研究一个使用事件监听器的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 }) } }
为什么不同?
它实际上与功能的位置无关.
当你这样做:
.on('tick', ticked(circles))
您ticked
在创建on
侦听器时立即调用.然后,您将回调分配为使用圆圈调用tick
的结果ticked
,即undefined
.
当你这样做:
.on('tick', ticked)
您将回调分配为ticked
函数,这是您想要的.