2012-07-07 12 views
5
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() 

El registro en el método animado en el Juego produce:variable de instancia se convierte en indefinido - CoffeeScript

foo = 2

foo = indefinido

Así foo es 2 en la primera llamada para animar y luego indefinido a partir de entonces. ¿Podría alguien explicar por qué y cómo puedo solucionar esto? Cualquier ayuda es muy apreciada.

+0

'requestAnimationFrame' no toma un número como segundo argumento; en cambio, llama a la función dada lo antes posible (normalmente más rápido que 'setTimeout (func, 0)') siempre que la pestaña del navegador esté en primer plano. Consulte https://developer.mozilla.org/en/DOM/window.requestAnimationFrame –

Respuesta

11

Cuando llame al setInterval, el contexto se pierde y la segunda vez @ es window. Es necesario métodos grasa de flecha para retener la adecuada this:

animate: => 
+0

Gracias por su respuesta. Esto ha funcionado pero ha causado un comportamiento muy extraño con requestAnimationFrame. Llamo a requestAnimationFrame como debería hacerse, pero con la flecha adiposa es como repetir la llamada sobre la otra llamada para solicitar AnimationFrame. –

+0

@ user881920 Esta repetición es el comportamiento correcto. Deberías aceptar la respuesta de Aaron. Si tiene un problema con 'requestAnimationFrame', debe formular otra pregunta al respecto. –

+0

Gracias por esta respuesta. Simple y claro. – Glenn

5

Puede definir animate de la siguiente manera:

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

La técnica aquí es conseguir un método vinculado. @animate por sí solo es sin consolidar, pero (=> @animate()) es la versión encuadernada de la misma.

Usted puede obtener un resultado análogo si está usando UnderscoreJS de la siguiente manera:

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

Y si está utilizando una versión posterior de JavaScript, es posible que pueda hacer de la siguiente manera:

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