CoffeeScript 中的多个回调答案

【问题标题】：Multiple Callbacks in CoffeeScriptCoffeeScript 中的多个回调
【发布时间】：2012-02-21 23:24:17
【问题描述】：

我正在尝试找出将多个回调串在一起的正确行为。

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

现在的问题是，头部动画很好，称为脚。脚的动画效果也很好。问题是当脚完成时，它不会为手臂设置动画。我无法弄清楚问题可能是什么。我猜想这可能与范围问题有关。

【问题讨论】：

标签： javascript jquery coffeescript

【解决方案1】：

使用粗箭头=>，将this 绑定到当前上下文：

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 动画调用的 complete 回调，this 不再绑定到您的对象！它可能绑定到window，但不确定。所以在你的情况下发生的事情是你给jQuery一个引用@move_foot（或者真的，this.move_foot）。这个调用似乎有效，因为你的动画完成了。但是当 jQuery 调用该函数时，它将不再知道 this 应该是您的 Person。因此，当您告诉它然后转到@move_arm 时，它会在其他对象（可能是window）上寻找方法move_arm。

解决此问题的常用方法是在调用之前保存对this 的引用，例如var self = this，然后在回调内部，改为引用绑定变量self。

你可以使用这种技术，它没有任何问题。比如：

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

但 CS 会为您执行此操作（绑定 this），为您提供粗箭头：=>。

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

【讨论】：