In doing so, we guarantee that the animation time is independent of how often the timer callback is actually executed. If there are big delays (due to other blocking events), this method may result in dropped frames.

animationStrategy.js

const animationRate = 30; // 30 ms

let initialTime, elapsedTime;

function animate(deltaT) {
  // calculate object positions based on deltaT
}

function onFrame() {
  const currentTime = new Date().getTime();
  elapsedTime = currentTime - initialTime;
  if (elapsedTime < animationRate) return; // come back later
  animate(elapsedTime);
  initialTime = currentTime;
}

function startAnimation() {
  setInterval(onFrame, animationRate / 1000);
}

const animationRate = 30; // 30 ms
const deltaPosition = 0.1;

function animate(deltaP) {
  // Calculate object positions based on deltaP
}

function onFrame() {
  animate(deltaPosition);
}

function startAnimation() {
  setInterval(onFrame, animationRate / 1000);
}

This may lead to frozen frames that occur when there is a long list of blocking events because the object's positions would not be updated in a timely manner.

const animationRate = 30; // 30 ms
const deltaPosition = 0.1;

let initialTime, elapsedTime;

function animate(delta) {
  // Calculate object positions based on delta
}

function onFrame() {
  const currentTime = new Date().getTime();
  elapsedTime = currentTime - initialTime;
  if (elapsedTime < animationRate) return; // come back later!
  let steps = Math.floor(elapsedTime / animationRate);
  while (steps > 0) {
    animate(deltaPosition);
    steps -= 1;
  }
  initialTime = currentTime;
}

function startAnimation() {
  initialTime = new Date().getTime();
  setInterval(onFrame, animationRate / 1000);
}