JSFiddle - React, Tailwind, and code Playground

by Darby Rathbone

HTML

<div>current: <span id='time'></span>
</div>
<div>average: <span id='average'></span>
</div>
<div>e: <span id='e'></span>
</div>
<div>c: <span id='c'></span>
</div>

JavaScript

var t = document.getElementById('time');
//current ms between frames
var de = document.getElementById('e');
//e is the counter on teh set interval without a time delay
var ce = document.getElementById('c');
//c is the counter for the frames total
var avg = document.getElementById('average');
//average is the total ms passed divided by the counter c giving the average ms betweeen frames.
requestAnimationFrame(displayTime);
var a = 0,
    c = 0,
    dt = 0;

function displayTime(tt) {
    c++;
    dt = tt - a;
    setTimeout(function () {
        avg.textContent = tt / c;
        t.textContent = dt;
        ce.textContent = c;
    });
    de.textContent = e;
    a = tt;
    requestAnimationFrame(displayTime);
}
var e = 0;
setInterval(function () {
    e++
});