What is better for the overall performance and feel of the game: one setInterval performing all the work, or many of them doing individual tasks?

Question

This question is, I suppose, not limited to Javascript, but it is the language I use to create my game, so I'll use it as an example.

For now, I have structured my HTML5 game like this:

var fps = 60;
var game = new Game();

setInterval(game.update, 1000/fps);

And game.update looks like this:

this.update = function()
{
    this.parseInput();
    this.logic();
    this.physics();
    this.draw();
}

This seems a bit inefficient, maybe I don't need to do all of those things at once. An obvious alternative would be to have more intervals performing individual tasks, but is it worth it?

var fps = 60;
var game = new Game();

setInterval(game.draw, 1000/fps);
setInterval(game.physics, 1000/a); //where "a" is some constant, performing the same function as "fps"
...

With which approach should I go and why? Is there a better alternative? Also, in case the second approach is the best, how frequently should I perform the tasks?

Answer 1

A single task is definitely better.

You don't want nondeterministic behaviour.

While Javascript normally runs all your code in one thread and won't interrupt it (it will not preempt other JS code), there's no guarantee of how often, or in what order or proportion, several timers will really run. If one timer event is a bit slow, others might get skipped.

In general, you probably want to be using requestAnimationFrame for rendering, and doing your game logic however often suits you.

I use a fixed timestep with interpolation, because that way I get deterministic behaviour. I trigger it all from requestAnimationFrame, and look at the clock to see if enough time has passed to run another game-logic "tick".

Answer 2

Dunno why but i can't add a comment so i had to use an answer >.>

For my game, I ditched set interval for request animation frame, If the user minimizes the browser the game will not continue running and so frees up your CPU which is why i preferred that particular method.

Answer 3

requestAnimationFrame is not your (logic's) friend recommends:

function render() {
    // Update the DOM, or Canvas, or anything else graphics-related
    requestAnimationFrame( render );
}

function gameStep() {
    // Update the player's location, health, or anything else logic-related
    // Process the game logic at a target 60 FPS.
    setTimeout( gameStep, 1000 / 60 ); 
}

Author says his physics plugin got better FPS after switching to this technique.