JSFiddle - React, Tailwind, and code Playground
JavaScript
var body = document.body;
loopIterate([1, 2, 3], function (element, time) {
body.innerHTML += element + ": " + time + "<br/>";
}, 1000);
function loopIterate(array, callback, interval) {
var timer = new DeltaTimer(function (time) {
var element = array.shift();
callback(element, time - start);
array.push(element);
}, interval);
var start = timer.start();
};
function DeltaTimer(render, interval) {
var timeout;
var lastTime;
this.start = start;
this.stop = stop;
function start() {
timeout = setTimeout(loop, 0);
lastTime = Date.now();
return lastTime;
}
function stop() {
clearTimeout(timeout);
return lastTime;
}
function loop() {
var thisTime = Date.now();
var deltaTime = thisTime - lastTime;
var delay = Math.max(interval - deltaTime, 0);
timeout = setTimeout(loop, delay);
lastTime = thisTime + delay;
render(thisTime);
}
}