JSFiddle - React, Tailwind, and code Playground

by bizamajig

HTML

<div class="first"></div>
<div class="second"></div>

CSS

.first { float: left; }
.second { float: right; }

JavaScript

var Queue = function () {
    var previous = new $.Deferred().resolve();
    
    return function (fn, fail) {
        if (typeof fn !== 'function') {
            throw 'must be a function';
        }
        
        return previous = previous.then(fn, fail || fn);
    };
};

var queue = Queue();
    
var $first = $('div.first');
var $second = $('div.second');

var withN = function ($el, n) {
    return function () {
        $el.append('starting(' + n + ')', '<br>');
        
        return $.get('/').done(function () {
            $el.append(n, '<br>');
        });
    };
};

var i;

for (i = 0; i < 10; ++i) {
    queue(withN($first, i));
}

for (i = 0; i < 10; ++i) {
    withN($second, i)();
}