JSFiddle - React, Tailwind, and code Playground

by ubershmekel

HTML

<body>
    <h1>First</h1>
    <div id="panel"></div>
</body>

JavaScript

var setTimeoutDelay = 50; // I noticed that 0 releases the UI in IE10 but not fully in Chrome31 or FF25.

var time = function() {
    return (new Date).getTime();
}

busy = function() {
    var start = time();
    while (time() - start < 2000) {
    
    }
    console.log('dn ' + time());
}

pin = function(i) {
    $('#panel').append($('<h1>' + i + '</h1>'));
}

clear = function() {
    $('#panel').html('');
}

fill = function() {
    busy();
    pin(1);
    busy();
    pin(2);
    busy();
    pin(3);
}

fill2 = function() {
    var def = $.Deferred();
    def.then(function() {
        busy();
        pin(1);
    }).then(function() {
        busy();
        pin(2);
    }).then(function() {
        busy();
        pin(3);
    });
    def.resolve();
}

fill3 = function() {
    setTimeout(function() {
        busy();
        pin(1);
        setTimeout(function() {
            busy();
            pin(2);
            setTimeout(function() {
                busy();
                pin(3);
            }, setTimeoutDelay);
        }, setTimeoutDelay);
    }, setTimeoutDelay);
}


$(function() {
    var start = function() {
        clear();
        setTimeout(fill3);
        //setTimeout(fill2);
        //setTimeout(fill3);
    };
    
    setTimeout(start);
});