Несколько обратных вызовов в 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, если вы называете его как new Person().move_head().Но это не должно быть.Например, если вы называете это с помощью new Person().move_head.call(null), this будет null.

Но самая большая проблема в том, что когда вы находитесь внутри function, как complete обратный вызов кjQuery animate call, this больше не привязан к вашему объекту!Это, вероятно, связано с window, но не наверняка.Так что в вашем случае вы даете jQuery ссылку на @move_foot (или на самом деле this.move_foot).Этот вызов, кажется, работает, потому что ваша анимация завершается.Но когда jQuery вызывает эту функцию, он больше не будет знать, что this должен быть вашим Персоном.Поэтому, когда вы говорите, чтобы затем перейти к @move_arm, он будет искать метод move_arm для какого-либо другого объекта (возможно, window).

Обычный способ решить эту проблему - сохранить ссылкуthis до того, как вы сделаете вызов, например var self = this, а затем, внутри обратного вызова, вместо этого обратитесь к этой связанной переменной self.

Вы можете использовать эту технику, в этом нет ничего плохого,Что-то вроде:

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

Но CS делает это (связывание this) для вас, давая вам жирную стрелу: =>.

Толстая стрелка говорит: «Всевнутри этого метода, ссылаясь на this, должен ссылаться на этот объект. "