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

使用FAT箭頭=>，結合this到當前環境：

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

UPDATE：這裏有一個簡短的說明：

一個最大的陷阱中JavaScript是this。在某種方法中（如您的move_head），如果您將其稱爲new Person().move_head()，則this是您的Person實例。但它不一定是。例如，如果你使用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內的所有內容，應引用此對象。」