JSFiddle - React, Tailwind, and code Playground

by alnitak

HTML

<div id="timer"> </div>
<div id="done"> </div>

JavaScript

function yieldingLoop(count, chunksize, callback, finished) {
    var i = 0;
    (function chunk() {
        var end = Math.min(i + chunksize, count);
        for (; i < end; ++i) {
            callback.call(null, i);
        }
        if (i < count) {
            setTimeout(chunk, 0);
        } else {
            finished.call(null);
        }
    })();
}

var j = 0;
var count = 1e6;

yieldingLoop(count, 1000, function() {
    ++j;
}, function() {
    document.getElementById('done').innerHTML = 'done!';
});

var t = document.getElementById('timer');
(function timer() {
    t.innerHTML = j;
    if (j < count) {
        setTimeout(timer, 100);
    }
})();