CoffeeScript中的多个回调

Question

我试图找出正确的行为,将多个回调串起来.

class Person

  move_head: ->
     head.animate({
        left: x,
     },{
        complete: @move_foot,
     });

  move_foot: ->
     foot.animate({
        left: x,
     },{
        complete: @move_arm,
     });

  move_arm: ->
     arm.animate({
        left: x,
     },{
        complete: something_else,
     });

现在的问题是,头部动画很好,这称之为脚.脚也很好动画.问题是当脚完成时,它不会使手臂动起来.我无法弄清楚问题可能是什么.我猜测它可能与范围问题有关.

Answer 1

使用胖箭头=>绑定this到当前上下文:

move_head: =>
  // ...
move_foot: =>
  // ...
move_arm: =>
  // ...

更新:这是一个简短的解释:

javascript中最大的陷阱之一是this.在一个方法(例如你的move_head)this中,如果你将其称为Person,则是Person的实例new Person().move_head().但它不一定是.例如,如果您使用它new Person().move_head.call(null),this将会null.

但最大的问题是,当你在一个内部时function,就像complete回调jQuery动画调用一样,this不再绑定到你的对象了!它可能是必然的window,但不是肯定的.那么在你的情况下发生的是你给jQuery一个引用@move_foot(或者真的this.move_foot).这个调用似乎有效,因为你的动画完成了.但是当jQuery调用该函数时,它将不再知道this应该是你的Person.因此,当你告诉它然后转到@move_arm它时,它会move_arm在某个其他对象上寻找一个方法(也许window).

解决此问题的常用方法是this在进行调用之前保存引用var self = this,然后在回调内部引用该绑定变量self.

你可以使用这种技术,它没有任何问题.就像是:

move_head: ->
  self = this
  head.animate(..., complete: self.move_foot)

但是CS做到这一点(的结合this为你)给你胖箭头:=>.

胖箭说:"这个方法所指的一切都this应该引用这个对象."