JSFiddle - React, Tailwind, and code Playground

by guest271314

HTML

<button>click</button>
<div id="results"></div>

JavaScript

$(function () {
    var _requests = [{
        "url": "/echo/json/",
        "data": JSON.stringify([1])
    }, {
        "url": "/echo/json/",
        "data": JSON.stringify([2])
    }, {
        "url": "/echo/json/",
        "data": JSON.stringify([3])
    }];

    var responses = [];

    var requests = new $.Deferred() || $(requests);

    requests.done(function (data) {
        console.log(data);
        alert(data.length + " requests completed");
        $.each(data, function (k, v) {
            $("#results").append(v + "\n")
        })
    });

    var request = function (url, data) {
        return $.post(url, {
            json: data
        }, "json")
    };

    var response = function (data, textStatus, jqxhr) {
        if (textStatus === "success") {
            console.log(data, textStatus);
            responses.push([textStatus, data, $.now()]);
            if ($.queue(requests, "ajax").length) {
                $.dequeue(requests, "ajax")
            } else {
                requests.resolve(responses)
            }
        };
    };

    $.each(_requests, function (k, v) {
        $.queue(requests, "ajax", function () {
            return request(v.url, v.data)
            .then(response /* , error */ )
        })
    })

    $("button").on("click", function () {
        $.dequeue(requests, "ajax")
    })
})