Loop forever and provide delta time

Question

I'm writing an HTML5 Game Development Javascript framework and I want to provide the user the difference in time between the last tick and the current one.

setInterval(tick, 16.6666666);

function tick() {
  update();
  draw();
}

That's what I have, but I want to have:

while (true) {
  /* Calculate delta time */

  tick(dt);
}

function tick(dt) {
  update(dt);
  draw();
}

I tried that, using date.getTime(); to calculate delta time, but Firefox said the script crashed. Obviously, an infinite loop will crash. Got any suggestions for how I can go about this?

I want an infinite loop, that can be stopped with break. I want to pass delta time too, but that I know how to do.

Answer 1

Just maintain a variable with the time of the last update, and calculate the elapsed time/delta time in tick itself.

var lastUpdate = Date.now();
var myInterval = setInterval(tick, 0);

function tick() {
    var now = Date.now();
    var dt = now - lastUpdate;
    lastUpdate = now;

    update(dt);
    render(dt);
}

Here's a JSBin, though I don't think it's really needed... http://jsbin.com/okimam/10

EDIT: I must point out that setInterval(tick, 0) does not necessarily mean that tick will be called immediately, with an interval of '0ms' between two calls. It depends on the browser.

Answer 2

This is what I use:

let lastTick = performance.now()

function tick(nowish) {
  const delta = nowish - lastTick
  lastTick = nowish

  update(delta)
  render(delta)

  window.requestAnimationFrame(tick)
}

window.requestAnimationFrame(tick)