jQuery Scheduler

by salitrapraveen

HTML

<div id="progress">
0%
</div>

<div id="output">
Loading...
</div>

CSS

body {
    font-family: helvetica;
}

#progress {
    width: 160px;
    height: 60px;
    background: #111;
    color: #fff;
    font-size: 48px;
    line-height: 60px;
    border-radius: 4px;
    margin: 10px auto;
    padding: 4px;
    text-align: center;
}

#output {
    margin: 20px auto;
    width: 160px;
    padding: 4px;
    box-shadow: 0 0 10px #ccc;
    font-size: 24px;
    color: #222;
    text-align: center;
}

JavaScript

(function($) {
    var tasks = [],
        settings = {
            sleep: undefined
        },
        numberOfTasks = 0,
        numberOfExecutedTasks = -1;
    methods = {
        schedule: function(task) {
            if ($.isFunction(task)) {
                tasks.push(function(cb){
                    task();
                    cb();
                });
                numberOfTasks++;
            }
            else {
                $.error('Parameter is not a function');
            }
        },
        schedulerSetup: function(options) {
            $.extend(settings, settings, options);
        },
        schedulerNext: function() {
            var nextTask;
            numberOfExecutedTasks++; //This is not very accurate if the sleep is set, not a big deal though
            if (tasks.length > 0) {
                nextTask = tasks.shift();
                (settings.sleep) ? setTimeout(function() {
                    nextTask($.schedulerNext);
                }, settings.sleep) : nextTask($.schedulerNext);
            }
        },
        schedulerProgress: function() {
            return numberOfExecutedTasks * 100 / numberOfTasks;
        }
    };

    $.schedule = methods.schedule;
    $.schedulerSetup = methods.schedulerSetup;
    $.schedulerNext = methods.schedulerNext;
    $.schedulerProgress = methods.schedulerProgress;
})(jQuery);

$(function() {
    var i = 0,
        j;
    for (j = 0; j < 20; j++) {
        $.schedule((function(index) {
            return function(cb) {
                $.get('/echo/json', function() {
                    $('#output').text(index);
                });
            }
        })(j));
    }
    $.schedulerSetup({sleep: 2000});
    
    setInterval(function(){
        $('#progress').text($.schedulerProgress() + '%');
    }, 500);
    
    $.schedulerNext();
    console.log('hello');
});