当前位置:  开发笔记 > 编程语言 > 正文

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

如何解决《为什么事件监听器回调函数只在函数范围内工作?》经验,为你挑选了1个好方法。

我正在研究一个使用事件监听器的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 })
    }
   }

为什么不同?



1> thedayturns..:

它实际上与功能的位置无关.

当你这样做:

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

ticked在创建on侦听器时立即调用.然后,您将回调分配为使用圆圈调用tick结果ticked,即undefined.

当你这样做:

.on('tick', ticked)

您将回调分配为ticked函数,这是您想要的.

推荐阅读
手机用户2402851155
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有