var q = async.queue(function (task, callback) { $('#status').html('Got Work ' + task.work); $('#' + task.work).addClass('active'); //simulate a time taking task $.ajax({ dataType: "json", url: '/echo/json/', type: 'post', data: { delay: 1, json: $.parseJSON(task.work) }, success: function (data) { $('#' + data).remove(); callback(); } }); }, 2); q.drain = function () { //all tasks done $('#status').html('Finished'); }; q.empty = function () { //last task is pending $('#status').html('Last Task'); }; q.saturated = function () { //queue limit reached $('#status').html('Saturated'); }; q.paused = function () { //queue is paused $('#status').html('Paused'); }; q.started = function () { //started $('#status').html('Started'); }; function updateProgress() { if (total_task > 0) { var per = Math.floor(total_task / max_task * 100); } else { var per = 0; } $('#list').html('Work List ' + total_task); $('#pg').css('width', per + '%'); $('#pg').html(total_task); } var total_task = 0; var max_task = 100; function addWork() { total_task++; updateProgress(); var work = Math.floor(Math.random(1000) * 1000); $('#work_list').append('<li id="' + work + '" class="list-group-item"> <span class="badge">"' + work + '"</span>Work</li>'); q.push([{ work: work }], function (err) { total_task--; updateProgress(); }); q.resume(); } function resumeWork() { q.resume(); } function pauseWork() { q.pause(); } function importantWork() { total_task++; updateProgress(); var work = Math.floor(Math.random(1000) * 1000); $('#work_list').append('<li id="' + work + '" class="list-group-item"> <span class="badge">"' + work + '"</span>Work</li>'); q.unshift([{ work: work }], function () { total_task--; updateProgress(); }); q.resume(); }