JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://rawgithub.com/azproduction/promise-queue/master/lib/index.js"></script>
<button>Add</button> <span></span>
<pre></pre>
<p></p>

JavaScript

// Or just Queue.configure(window.Promise);
Queue.configure(function (handler) {
    var dfd = $.Deferred();
    try {
        handler(dfd.resolve, dfd.reject, dfd.progress);
    } catch (e) {
        dfd.reject(e);
    }
    return dfd.promise();
});

// max concurrent - 1
// max queue - 2
var queue = new Queue(2, 1),
    id = 0;

function processSomethingHeavy() {
    id++;
    var dfd = $.Deferred();
    var $loading = $('<div style="color: #' + Math.random().toString(16).slice(-6) + '">' + id + ' - Loading...</div>').appendTo('p');    
    setTimeout(dfd.resolve, 4000, $loading);    
    return dfd.promise();
}

function status() {
    $('span').text('Pending ' + queue.pendingPromises + '/' + queue.maxPendingPromises + ' Queued ' + queue.queue.length + '/' + queue.maxQueuedPromises);
}

$('button').click(function () {
    queue.add(processSomethingHeavy)
    .then(function ($loading) {
        status();
        $loading.remove();
    }, function (err) {
        $('<div>' + err + '</div>').appendTo('pre');
    });
    status();
});

status();