CODEWITHSUNDEEP
javascripttimerhtml5-canvasdelay
Katherine1
Katherine1

Reputation: 195

Javascript timer delay

I've decided to play around with HTML5's canvas, and of course that means I'm going to try writing a pong game. At the moment, I am trying to figure out how to cap my framerate. This is fairly easy in other languages, but finding a way to delay execution in Javascript seems to be a bit tougher.

Here is what I have so far:

while(true) {
    var begin = (new Date()).getTime();

    //Draw stuff to the canvas

    var end = (new Date()).getTime();
    if ((end-begin) < 33.333 ) {
        //delay (1000/(30-(end-begin)))
    }
}

Obviously, frame rates will be wildly different due to how each javascript engine performs, but I want to cap the maximum framerate at 30FPS. I don't really see how setTimeout() would accomplish this task. What would be the best way to do this?

Upvotes: 2

Views: 13589

Answers (1)

closure
closure

Reputation: 7452

There is no delay / wait in JavaScript. You can use functions like window.setTimeout to call a function after certain time has elapsed, example:

window.setTimeout(function() {
    // do something interesting
}, 2000 /* but after 2000 ms */);

Or say you want to paint a frame every 33 ms (~30 fps), you will code it like:

window.setInterval(function() {
    // paint my frame 
}, 33);

Upvotes: 7

Related Questions