JSFiddle - React, Tailwind, and code Playground

by siyakunde

HTML

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<div id="results" </div>

JavaScript

var finalCallback = function() {
    if(Queue.timeout != null)
        $("#results").append(" Final CallBack ");
    Queue.timeout = null;
}

var testFunction = function(address){
    setTimeout(function(){  
        $.ajax(address)
        .done(function () {
            $("#results").append(" success -> ");
        })
        .fail(function () {
            $("#results").append(" error -> ");
        })
        .always(function () {
            $("#results").append(" complete -> ");
            Queue.markDone();
            if((Queue.itemCount === Queue.itemsDoneCount) && 
              (Queue.timeout != null))
                Queue.callback();
        });
    },0000);/*This settimeout is only for testing. change time value to test queue callback in case of delay*/
}

var Queue = { 
    items: [],
    itemCount: 0,
    itemsDoneCount: 0,
    timeout: null,
    callback: null,
    push: function(fn, sc, pr){
        this.items.push({func:fn,scope:sc,params:pr}); 
        this.itemCount++;
    },
    start: function(finalCallback, timeoutForQueue){
        this.callback = finalCallback;
        this.timeout = setTimeout(this.callback, timeoutForQueue);
        while(this.items.length){
            var f = this.items.shift();
            (f.func).call(f.params);
        }
    },
    markDone: function(){
        this.itemsDoneCount++;
    }
};

Queue.push(testFunction, this, "http://fiddle.jshell.net/");
Queue.push(testFunction, this, "http://google.com/");
Queue.push(testFunction, this, "http://www.coupondunia.in/");
Queue.start(finalCallback, 3000);