爲什麼事件偵聽器回調函數只能在函數範圍內工作？

Question

我正在開發一個D3項目，它使用一個事件偵聽器，每隔幾毫秒就會調用一次來更新/設置屏幕上圓圈位置的動畫。

它從函數startForces（）開始調用一次來激活D3的力量，我們通過它的圓圈。

當回調函數（勾號）位於startForces（）範圍之外時，該函數似乎只調用一次，並且圓圈在頁面上顯示爲靜態。 （查看頂級代碼塊）

但是，當回調函數（勾號）位於startForces（）的範圍內時，一切都按預期工作，圓圈顯示爲動畫。 （BOTTOM CODE CHUNK）

我想了解爲什麼JavaScript是這樣工作的。爲什麼頂級代碼無法工作，底層代碼是否工作？

TL：DR

NOT-工作代碼

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功能，這是你想要的。