实例变量变得不确定 - 的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

回答

相关问题