Alberto Acuña
Alberto Acuña

Reputation: 535

'Maximum call stack size exceeded' AnimationFrame

im trying create a class, that can start this game, as a method of my class Game. As you can see i add my request animation frame as a function inside a method, but it give me a error: 'Maximum call stack size exceeded'

function Game(){
    this.player = null;
    this.anim = null;
}

Game.prototype.start = function () {
    this.anim = requestAnimFrame( this.start() );
    //code
}

Game.prototype.end = function() {
    cancelAnimFrame ( this.anim );
}

//create game
var game = new Game();

//start game
game.start();

This work if I use this :

function render(){ 
    requestAnimFrame(render);
};
//start anim
render();

So I dont know what it doesnt work if is inside a method.

this is the code for anim frame I use:

window.requestAnimFrame = (function(){
return  window.requestAnimationFrame       || 
        window.webkitRequestAnimationFrame || 
        window.mozRequestAnimationFrame    || 
        window.oRequestAnimationFrame      || 
        window.msRequestAnimationFrame     || 
        function(callback,element){
            window.setTimeout(callback, 1000 / 60);
        };
})();

window.cancelAnimFrame = (function(){  
return  window.cancelAnimationFrame       || 
        window.mozCancelAnimationFrame ||
        function(callback,element){
            window.setTimeout(callback, 1000 / 60);
        };
})();

Im not use if you know what im trying to do, thanks.

Upvotes: 0

Views: 1164

Answers (2)

Alberto Acuña
Alberto Acuña

Reputation: 535

I found the answer, the problem is that when I call :'this.start' im refering of 'window' as 'this', so the the problem goes if I save it as 'that' or 'window', then excecute it, thanks all.

var Game = function () {
    this.anim = null;

}

Game.prototype.startAnimation = function(){
    window.requestAnimFrame(this.startAnimation.bind(this));
}

var game = new Game();
game.startAnimation();

Upvotes: 1

Stranded Kid
Stranded Kid

Reputation: 1395

Game.prototype.start = function () {
    this.anim = requestAnimFrame( this.start() );
    //code
}

For requestAnimFrame( this.start() );, you are calling the start within itself, which causes an infinite loop.

You should try requestAnimFrame(this.start); even if it would still looks weird :(.

Upvotes: 0

Related Questions