javascript - 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,
     });

现在的问题是，头部动画很好，它调用了脚。脚也很好地动画。问题是当脚完成时，它不会为 ARM 设置动画。我不知道可能是什么问题。不过我猜测这可能与范围界定问题有关。

Answer 1

使用粗箭头 =>，将 this 绑定(bind)到当前上下文:

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

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

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

但最大的问题是，当您在 function 内部时，例如对 jQuery animate 调用的 complete 回调，this 不是不再绑定(bind)到您的对象!它可能绑定(bind)到 window，但不确定。因此，在您的情况下，您为 jQuery 提供了对 @move_foot(或者实际上是 this.move_foot)的引用。此调用似乎有效，因为您的动画已完成。但是当 jQuery 调用该函数时，它将不再知道 this 应该是您的 Person。因此，当您告诉它然后转到 @move_arm 时，它会在其他某个对象(可能是 window)上寻找方法 move_arm。

解决这个问题的一种常见方法是在调用之前保存对 this 的引用，例如 var self = this，然后在回调中引用改为绑定(bind)变量 self。

你可以使用这个技巧，没有任何问题。像这样的东西:

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

但 CS 会为您完成此操作(this 的绑定(bind))，方法是给您粗箭头:=>。

粗箭头表示:“此方法中引用 this 的所有内容均应引用此对象。”