實例變量變得不確定 - 的CoffeeScript

class Game 

    foo: null 

    play: -> 

    @foo = 2 
    @animate() 

    animate: -> 

    requestAnimationFrame(@animate, 1000) 
    console.log('foo = ', @foo) 


$ -> 
    game = null 

    init = -> 

    game = new Game() 
    game.play() 

    init()

日誌在遊戲的動畫的方法生產：實例變量變得不確定 - 的CoffeeScript

富= 2

富=未定義

所以foo是2上的第一呼叫進行動畫然後再未定義。有人可以解釋爲什麼以及如何解決這個問題。任何幫助深表感謝。

來源

2012-07-07 Jamie Fearon

'requestAnimationFrame'不會將數字作爲第二個參數;相反，它調用給定函數ASAP（通常比'setTimeout（func，0）'更快），前提是瀏覽器選項卡位於前臺。見https://developer.mozilla.org/en/DOM/window.requestAnimationFrame – 2012-07-08 01:04:59

當您撥打setInterval時，上下文丟失，第二次@爲window。你需要脂肪箭頭的方法來保持適當的this：

animate: =>

來源

2012-07-07 23:21:41

謝謝你的回答。這已經工作，但已導致與requestAnimationFrame非常奇怪的行爲。我正在調用requestAnimationFrame，但應該這樣做，但使用胖箭頭，它會重複調用另一個調用requestAnimationFrame的調用。 – 2012-07-07 23:39:24

@ user881920這種重複是正確的行爲。你應該接受亞倫的回答。如果你對'requestAnimationFrame'有問題，你應該問一個單獨的問題。 – 2012-07-08 01:07:16

感謝您的回答。簡單明瞭。 – Glenn 2014-05-16 14:49:08

您可以定義animate如下：

animate: -> 
    callback = (=> @animate()) 
    requestAnimationFrame(callback, 1000) 
    console.log('foo = ', @foo)

這裏的技術是獲得一個綁定的方法。 @animate本身是未綁定，但(=> @animate())是它的綁定版本。

如果你使用UnderscoreJS如下你可以得到類似的結果：

animate: -> 
    callback = _.bind(@animate, @) 
    requestAnimationFrame(callback, 1000) 
    console.log('foo = ', @foo)

如果你正在使用JavaScript的更高版本，你可以做如下：

animate: -> 
    callback = @animate.bind(@) 
    requestAnimationFrame(callback, 1000) 
    console.log('foo = ', @foo)

來源

2012-07-08 01:50:48 yfeldblum

實例變量變得不確定 - 的CoffeeScript

回答

相關問題