Promise Queue Example

HTML

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

JavaScript

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

function processSomethingHeavy() {
    id++;
    var dfd = $.Deferred();
    $loading = $('<div style="color: #' + Math.random().toString(16).slice(-6) + '">' + id + ' - Loading...</div>').appendTo('p');    
    setTimeout(dfd.resolve, 4000);    
    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 class="error">' + err + '</div>').appendTo('pre');
        
        setTimeout(() => {
        	$('.error').remove()
        }, 4000);
    });
    status();
});

status();