JSFiddle - React, Tailwind, and code Playground

by _sir

HTML

<div id="q_wrap">
    <h1>Queue</h1>
    <div id="queue"></div>
</div>
<div id="c_wrap">
    <h1>Clock</h1>
    <div id="clock"></div>
</div>

<button id="time1000">Create Random Timeout</button><br>
<button id="addScript">Script w/ 1 second busy</button><br>
<button id="busy">Be busy for 3 seconds</button>

CSS

* { box-sixing: border-box; }
body { font-family: sans-serif;}
h1 { font-size: 20px; margin: 0; border-bottom: 2px solid gray; }
h1, div, button { line-height: 40px; }

#q_wrap { width: 200px; float: right; min-height: 80px; background: #eee; border: 2px solid gray; border-radius: 2px; text-align: center; }

#queue div { height: 40px; }

#c_wrap { width: 200px; min-height: 84px; background: #efe; border: 2px solid gray; border-radius: 2px; text-align: center; }

button { clear: both; margin-top: 2em; padding: 0 1em; width: 204px; }

JavaScript

function updateClock() {
    $c.text(new Date().getTime() - startTime);
}

function busy(interval){
    interval = interval || 3000;
    
    var end = new Date().getTime() + interval,
        i = 0;
    
    while ( new Date().getTime() < end ) {
        i++;
    }
    return true;    
}

// Expose this publicly for loaded scripts.
window.busy = busy;

var $c = $('#clock'),
    startTime = new Date().getTime(),
    clock = setInterval(updateClock,100),
    queue = [],
    scriptQueue = [];
    $q = $('#queue');

$('#time1000').on('click', function() {
    console.log('click');
    // Add a queued item
    var newTime = new Date().getTime(),
        timeout = Math.floor(Math.random() * 1e4) + 1000,
        endTime = newTime + timeout - startTime,
        $el = $('<div id="q' + endTime + '">' + endTime + '</div>'),
        len = queue.length,
        i = 0,
        cur;
    
    // Background color:
    $el.css('background','rgb(' + (Math.floor(Math.random() * 55) + 200) + "," +
            (Math.floor(Math.random() * 55) + 200) + "," +
            (Math.floor(Math.random() * 55) + 200) + ")");
    
    if (len === 0) {
        $q.append($el);
        queue[0] = endTime;
    } else {
        for (;i<len;i++) {
            cur = queue[i];
            
            console.log( i, cur, endTime, cur > endTime);
            if (endTime < cur ) {
                $('#q' + cur).before($el);
                queue.splice(i,0,endTime);
                break;
            }
        }
        // Did we add it?
        if (queue.length === len) {
            console.log("Not less");
            $q.append($el);
            queue.push(endTime);
        }
    }
    
    $el.hide().slideDown('fast');
    
    console.log(queue);
    
    setTimeout(function(){
        var idx = queue.indexOf(endTime);
        console.log(idx, endTime);
        queue.splice(idx,1);
        $el.slideUp(function(){ $(this).remove(); });
    }, timeout);

});

$('#busy').on('click', function() {
  ...