Question

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()

The log in the animate method in Game produces:

foo = 2

foo = undefined

So foo is 2 on the first call to animate and then undefined thereafter. Could someone please explain why and how I can fix this. Any help is much appreciated.

Answer 1

When you call setInterval, context is lost and the second time @ is window. You need fat-arrow methods to retain the appropriate this:

animate: =>