JSFiddle - React, Tailwind, and code Playground

by karlovac

JavaScript

$(function () {
    
    function AjaxQueue(callBack) {
        this.inQueue = [];
        this.outQueue = [];
        this.callBack = callBack;
    }
    AjaxQueue.prototype.AjaxQueueItem = function (url, callbackName) {
        this.url = url;
        this.callbackName = callbackName;
        this.response = null;
    }
    AjaxQueue.prototype.addCall = function (url, callbackName) {
        this.inQueue.push(new this.AjaxQueueItem(url, callbackName));
    }
    AjaxQueue.prototype.execute = function () {
        console.log("executing", this.inQueue);
        this.outQueue = [];
        var queueItem = this.inQueue.shift();
        this.doNext(queueItem);
        
    }
    AjaxQueue.prototype.done = function() {
        this.callBack();
    }

    AjaxQueue.prototype.doNext = function(queueItem) {
        
        $.ajax({url: queueItem.url,
                dataType: "jsonp",
                context: this,
                jsonpCallback: queueItem.callbackName
               }).done(function (response) {
                    queueItem.response = response;
                    this.outQueue.push(queueItem);
                    if (queueItem = this.inQueue.shift()) {
                        this.doNext(queueItem);
                    } else {
                        this.done();
                    }
               });
    }
                        
    var ajaxQueue = new AjaxQueue(function () {
        console.log("all done!", this.inQueue, this.outQueue);
    });
    ajaxQueue.addCall("http://s3.amazonaws.com/fluid-configure-published/prod/dev/customers/c1525/configureHtml/products/p_20725/configureHtmlProductData.js", "configure_c1525_p_20725_jsonp_callback");
    ajaxQueue.addCall("http://s3.amazonaws.com/fluid-configure-published/prod/prod/customers/c1525/configureHtml/products/p_20725/configureHtmlProductData.js", "configure_c1525_p_20725_jsonp_callback");

    ajaxQueue.execute();    
});