How can I detect and compensate for system related lag?

Question

The best example I can think of is Doom 3. It seemed to me that if there was any kind if lag the game would pause and then resume without "fast forwarding" to catch up. I'm trying to figure out a good practice to use for lag detection in JavaScript.

Answer 1

First Rq : A key rule in Javascript : avoid system lag, with a very simple principle : do not feed the garbage collector.
So : Reuse your Arrays, do not create closures, use integers and not strings, pool your objects, ... a lot of simple rules too long to explain in a few words.

Now that you've done that, to avoid a slow-down/ fast forward behaviour, you have to to handle the time and timers by yourself. And drop a frame or more if you have to.

Rq : A secondary benefit of handling your game time/timers is that it will allow to nicely pause the game, and even to go faster or bullet-time if you want.

So how to handle your game time ?
Inside your run() loop you should measure the time between two calls (delta), and add up that 'real' time to your game time... Unless (and that's the trick) too much time elapsed (there was a pause or a system lag) : in that case you consider that just one frame elapsed.
Scale that time delta to allow bullet time / fast speed.

And for the game timers either :
a) you implement your own game timers (gameSetTimeout/gameSetInterval) (somehow complex)
b) you only check your entities against the game time for time-related actions.
expl, for a human that turns into a zombie after a given time :

if (this.isDead && (gameTime - this.DeathTime > ZombieToHumanTurnTime)) { 
                this.type          = 'zombie'; 
                this.isDead        = false   ; 
                this.isLivingDead  = true    ; 
                this.target        = 'brain' ;  // :)
           }  

(you can write this in a neater way with a : if (this.shouldTurn()) ... )

So now that you have your game time, you must have your entities update depending on game time :

So with delta = delta between current game time and previous frame game time :

this.update ( delta ) {  // position update for a simple entity having velocity.
    this.x = this.x + this.velocity.x*delta; // depends on dt (ms)
    this.y = this.y + this.velocity.y*delta; // depends on dt (ms)
}

Notice that window.performance.now is a much more accurate timer available (with a polyfill) on almost all current platforms.