Timing strategies

In this section, we will create the second JavaScript timer that will allow controlling the animation. As previously mentioned, a second JavaScript timer will provide independency between how fast your computer can render frames and how fast we want the animation to go. We have called this property the animation rate.

However, before moving forward you should know that there is a caveat when working with timers: JavaScript is not a multi-threaded language.

This means that if there are several asynchronous events occurring at the same time (blocking events) the browser will queue them for their posterior execution. Each browser has a different mechanism to deal with blocking event queues.

There are two blocking event-handling alternatives for the purpose of developing an animation timer.

Animation strategy

The first alternative is to calculate the elapsed time inside the timer callback. The pseudo-code looks like the following :

var initialTime = undefined;
var elapsedTime = undefined...