Javascript timer delay

Question

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?

Have you tried setInterval? There are certainly some issues to be aware of, like a non-linear clock but at least this allows you to 'sleep' a bit. — Halcyon
– Halcyon, Commented Dec 21, 2012 at 17:55
Check out requestAnimationFrame (click me), it will give you about a 60ish FPS (or whatever best fits the client). — Martijn Hols
– Martijn Hols, Commented Dec 21, 2012 at 17:56
Related to the above comment: programmers.stackexchange.com/questions/175934/whats-the-best-way-to-use-requestanimationframe-and-fixed-frame-rates — m90
– m90, Commented Dec 21, 2012 at 18:00

katspaugh · Accepted Answer · 2012-12-21 20:20:49Z

7

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);

edited Dec 21, 2012 at 20:20

katspaugh

18k12 gold badges69 silver badges107 bronze badges

answered Dec 21, 2012 at 17:56

closure

7,4521 gold badge25 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

gpojd Over a year ago

I think it is window.setInterval rather than window.setTimeInterval.

Collectives™ on Stack Overflow

Javascript timer delay

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related