Execute set of Javascript method asynchronously

Objective 

Few days back I had a small requirement of running set of javascript method asynchronously. Kind of how ThreadPool works in C# or Java. So objective was to provide set methods with there required parameters and some jquery plug-in will take care of it's calling and finally after the execution callback method (provided during assignment) should fire back. 

Introduction 

Sometime it could be very useful, specially when you have set of javascript method, which can be fired and forget.

Background 

Implemented code is very simple and easy to follow. It will be nice if read has knowledge of javascript/jquery knowledge.

Using the code  

So to achieve this lets divide the whole objective into two parts. 

• Jquery plug-in which will have gateway method to process user methods async.
• Consume jquery plug-in and pass set of methods into that 

Lets see how jquery plug-in looks like:

jQuery.extend({
    JobPool: function (options, job, callback, data) {
        var obj = this;
        var options = $.extend({
        }, options);
        var joblist = Array();

        var QueueJob = function (job, callback, ops, data) {
            if (job == 'undefined') {
                return;
            }

            ops = ops || {};

            var jobItem = new JobItem(job, callback, ops, data);
            if (jobItem) {
                joblist.push(jobItem);

                QueueChanged.call();
            }
        };

        var JobItem = function (job, callback, ops, data) {
            var jobitem = this;
            ops = ops || {};
            this.Data = data;
            this.Job = job;
            this.Callback = callback;

            this.Run = function () {
                try {
                    if (!jobitem.Job) return;

                    var returnValue = jobitem.Job(jobitem.Data);

                    jobitem.Callback(returnValue);
                }
                catch (e) { }
            }
        }

        var AjaxCall = function (jobItem) {

            if (!jobItem) jobItem = this;

            $.ajax({
                url: "#",
                type: 'GET',
                dataType: 'html',
                async: true,
                timeout: 3000,
                cache: false,
                data: '',
                success: function (dt, x) {
                    //AddEntry("In call 1-" + data);
                    //alert('call go');
                    if (typeof(jobItem.Run) == 'function')
                        jobItem.Run.call();

                    QueueChanged.call();
                },
                error: function (obj, x) {
                    //AddEntry("In call 2-" + data);
                    //alert('call stop');
                    if (typeof(jobItem.Run) == 'function')
                        jobItem.Run.call();

                    QueueChanged.call();
                }
            });
        };

        var QueueChanged = function () {
            if (joblist == null || joblist.length == 0) return;

            var jobitem = joblist.pop();

            AjaxCall.call(jobitem);
        }

        QueueJob(job, callback, options, data);

        return this;
    }
});

JobItem is the container which keep actual method to call and QueueJob is queuing the job to an array and since we have change in the array, so we are calling  QueueChanged api to process JobItem from updated Queue list.

Now lets see how we can consume it in our code.

 $(function () {
    for (i = 0; i < 10; i++) {
        //callAjax(i);
        $.JobPool({}, AddEntry, callbackItem, { 'value': "In call 1-"+i });
    }

    AddEntry("After Call");
});<span style="font-size: 14px;"> </span>

 function callbackItem(obj) {
    AddEntry("got callback-");
}  

function AddEntry(obj) {

    var strVal = '';

    if (typeof (obj) == 'object')
        strVal = obj.value;
    else
        strVal = obj;

    var el = document.createElement("div");
    $(el).text(strVal + " - " + new Date().getTime().toString());
    $('#container')[0].appendChild(el);
}