javascript - HTML5 canvas game won't pause rendering when browser is not in focus -

my friends , making game, , earlier tests, requestanimationframe() make sure game pause when wasn't in focus. in our current game, here, can see keeps rendering when not in focus. use deal rendering:

//main game loop, updates , renders game var main = function(){         var = date.now();         var delta = - then;          update(delta / 1000);         render();          = now;          requestanimationframe(main); };  //updates positions of target , enemy var update = function(delta){         target.update(delta, gamecanvas);         planet.update(delta);          enemies.foreach(function(enemy){                 enemy.update(delta, gamecanvas)         });         defenders.foreach(function(enemy){                 enemy.update(delta, gamecanvas)         }); };  //clears screen var clearscreen = function(){         gamectx.clearrect(0,0,gamecanvas.width, gamecanvas.height); };  //clears screen, , redraws objects var render = function(){         clearscreen();          planet.draw(gamectx);         enemies.foreach(function(enemy){                 enemy.draw(gamectx)         });         defenders.foreach(function(enemy){                 enemy.draw(gamectx)         });          target.draw(gamectx); };  //updates time, runs main loop var = date.now(); main(); 

anyone have idea what's going wrong?

i think you're looking in wrong direction.

• requestanimationframe does stop triggering when application tabbed out.
'real' time keeps on running. delta, when browser resumes, huge, making movements/physic/.... go dust.

• first thing : have delta clamped. in both ways. if it's above 50ms, must have been tabbed out, consider, say, 16ms elapsed. fast display (like 120hz, people have this), small delta drive computer's fan crazy, check against, 14ms avoid overheat/fan turning/battery sinking. might want handle 'game time' time elapsed within game.

var gametime = 0;  var typicalframe  = 16; var smallestframe = 14; var longestframe  = 50;  var main = function(){     var = date.now();     var delta = - then;     if (delta<smallestframe) return;     if (delta>longestframe) delta = typicalframe;     gametime += delta;     = now;      ... 

• second thing : if advice above might enough, in fact might want pause game when loose focus. first example comes mind music, might want stop (do ! it's boring when don't know tab playing music !!). second example network game server know player isn't playing more.
not difficult : handle window.onblur , window.onfocus events , think appropriate here stop game clock, music, ...