JSFiddle - React, Tailwind, and code Playground

by jeremyblalock

HTML

<div>
    <span id='r1'></span>
    <span id='r2'></span>
    <span id='r3'></span>
    <span id='r4'></span>
    <span id='r5'></span>
</div>

CSS

div {
    font-family: monospace;
}

JavaScript

function loop(count, callback) {
    var seed = 0, prev = 0, current, diff;
    
    function iterate() {
        current = new Date();
        diff = current - seed;
        seed = (seed << 1) + (diff & 1);
        console.log(+current, diff, seed);
    }

    function action() {
        iterate();
        count -= 1;
        if (count > 0) {
            window.setTimeout(action, 10);
        } else {
            callback(seed);
        }
    }

    action();
}

function renderResult(elementId) {
    return function(seed) {
        document.getElementById(elementId).innerHTML = seed;
    }
}

window.setTimeout(function() {
    loop(16, renderResult('r1'));
}, 0);

window.setTimeout(function() {
    loop(16, renderResult('r2'));
}, 300);

window.setTimeout(function() {
    loop(16, renderResult('r3'));
}, 600);

window.setTimeout(function() {
    loop(16, renderResult('r4'));
}, 900);

window.setTimeout(function() {
    loop(16, renderResult('r5'));
}, 1200);