Hello!
I am creating a HTML5 game engine & I have a few questions regarding the game loop. Note: I'm not really looking for the most accuracy, nor do I care about compatibility. I'm looking for the best performance.

1. setinterval vs requestAnimationFrame? I understand the differences with regards to timing, but is there really a good argument to use setinterval over requestAnimationFrame?

2. I created a Timer class that uses one of the above methods [requestAnimationFrame for now] to call Timer.Tick() on a set FPS. I need Main.Draw() & Main.Update() to be called on each tick. Would performance take a hit if a "Tick Event" fired off each time the Timer.Tick() was called? Listeners would be set up in Main to listen for each "Tick Event" and fire off the Update/Draw function.



Thank you very much for any advice!

I don't know what your Timer class does internally, but if it simply calls the update and draw functions once per frame I can't imagine how it could contain wasteful processing or indirection. The common ways to use timers inefficiently are drawing more frames than needed, busy waiting, and performing updates in too many unnecessarily small timesteps, all three of which are highly implausible if you use setInterval or requestAnimationFrame.
Can you post code?

Yeah, sure. I might be overly concerned with performance, worrying about things that won't effect it much. Here's the settimeout version (having problems with requestAnimationFrame):


Engine.Time = function () {
this.timeBetweenFrames = SECOND / 30;
this.previousTime = 0;
this.delta = 0;
this.customEvent = document.createEvent("Event");
this.running = false;

return this;
};

Engine.Time.prototype = {
Init: function () {
this.previousTime = new Date().getTime();
this.running = true;

this.customEvent.initEvent("Update", false, false);

var self = this;
setTimeout(function() { self.Update(); }, this.timeBetweenFrames);

return this;
},

Update: function () {
if (this.running == false) return;

var currentTime = new Date().getTime();
this.delta = (currentTime - this.previousTime) / SECOND; // Constant
this.previousTime = currentTime;

document.dispatchEvent(this.customEvent);
var self = this;
setTimeout(function() { self.Update(); }, this.timeBetweenFrames);

return this;
},


Stop: function () {
this.running = false;

return this;
}
};


...