JSFiddle - React, Tailwind, and code Playground

HTML

<ul id='output'></ul>

JavaScript

// Queue class.
// Has a public append method that expects some kind of task. A task is a generic function.
// Constructor expects a handler which is a method that takes a ajax task
// and a callback. Buffer expects the handler to deal with the ajax and run
// the callback when it's finished
function Queue(handler) {
    var queue = [];

    function run() {
        var callback = function () {
            queue.shift();
            // when the handler says it's finished (i.e. runs the callback)
            // We check for more tasks in the queue and if there are any we run again
            if (queue.length > 0) {
            	run();
            } else
            	$('output').insert({bottom: '<li>queue free' + new Date() + '</li>'});
        }
        // give the first item in the queue & the callback to the handler
        handler(queue[0], callback);
    }

    // push the task to the queue. If the queue was empty before the task was pushed
    // we run the task.
    this.append = function (task) {
        queue.push(task);
        if (queue.length === 1) {
            run();
        }
    }

}

// small handler that loads the task.url into the task.item and calls the callback 
// when its finished
var queue = new Queue(function (task, callback) {
    task(function () {
        // call an option callback from the task
        if (task.callback) task.callback();
        // call the buffer callback.
        console.log(task, ' done');
        callback();
    });
});


var tasks = [

function (callback) {
    setTimeout(function () {
        $('output').insert({
            bottom: '<li>Uno - ' + new Date() + '</li>'
        });
        callback();
    }, 1000);
},

function (callback) {
    setTimeout(function () {
        $('output').insert({
            bottom: '<li>Due - ' + new Date() + '</li>'
        });
        callback();
    }, 3000);
},
function (callback) {
    setTimeout(function () {
        $('output').insert({
            bottom: '<li>Tre - ' +...