JSFiddle - React, Tailwind, and code Playground

by Darby Rathbone

JavaScript

var count = 0,
    fps = 150,
    ms = 1000 / fps,
    avgfps = 0,
    debouncer,
    _t = 0,
    T = 0,
    avg = (function () {
        var a = 0,
            count = 0;
        return function (d) {
            
            if(isFinite(d))
            a = a * count / ++count + (1 / count * d);
            return a;
        };
    })(),
    loop = function loop() {
                var d;
            setTimeout(loop, (ms+(ms-avgfps)));
        if(debouncer)
            cancelAnimationFrame(debouncer); // this cancels the rendering of the frames between the framerate
        debouncer = requestAnimationFrame(displayer);
        /* requestAnimationFrame is called on the function that renders the result */
 d = Date.now();

        avgfps=avg((d - (_t || d)));
        _t = d;
        
        /* this is where each iteration of the draw function is called. */



    },
    displayer = (function () {
        var IPS = document.createTextNode( "iterations per second ~= " + avgfps);
        document.body.appendChild(IPS);
        return function () {

            IPS.data = "iterations per second ~= " + 1000/avgfps;
        };
    })();
loop();