為什么事件監聽器回調函數只在函數范圍內工作？

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函數，這是您想要的。