Javascript memory management (requestAnimationFrame callback)

Question

I am trying to make a blatant rip off of asteroids, but I'm running into a serious memory management problem.

I'm using window.requestAnimationFrame to serve up frames for my game by having a "gameloop" function call requestAnimationFrame with itself as an argument. However, I must be doing something very wrong because the memory usage of my game is massive which results in frequent garbage collection and poor performance (and the typical saw-toothed memory usage pattern associated with it). I'm pretty sure that the reason for this problem is that many function objects are being created by this loop of function and callback - probably some innocuous statement which results in a function being created instead of being reused... probably the gameloop function...

I got this idea from this post: https://www.scirra.com/blog/76/how-to-write-low-garbage-real-time-javascript

Here's a jsfiddle with my code on it: http://jsfiddle.net/LEqUr/ (hit space with the window in focus to make new asteroids appear). I know some of my stuff is camel case and some is done with underscores - sorry.

Here's (I think) the most relevant part of the code:

var gameLoop = function () {
    getSetStageSize(1, 1);
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    updateGameState();
    window.requestAnimFrame(gameLoop);
}

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

So with all that said, I'd really like some feedback about how my code is organized (it could definitely use some work), some information about callbacks, some information about how/when objects are created within crazy nested callbacks and any other helpful advice you might have.

Thanks!

Answer 1

I don't know too mich about the animation-specific parts but you could simplify the last part a bit. You don't need the IIFE because you aren't declaring any local variables.

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

Other than that, you might wat to consider coding things to use setInterval behind the scenes instead of setTimeout. When you use setTimeout, the actual time per frame is the (100/60) from the timeout plus however long it takes for your code to process that frame. setInterval, on the other hand, is more aware of the real clock behind the scenes and will adjust the timeout between frames to compensate for the processing time.