JSFiddle - React, Tailwind, and code Playground

by TrueBlueAussie

HTML

<input id="Sequential" type="button" value="Sequential" />
<input id="Parallel" type="button" value="Parallel" />
<br/>
<hr/>

JavaScript

function AsyncAction(name) {
    var def = $.Deferred();
    // Append some buttons so we can resolve or fail this operation

    var $resolve = $('<input type="Button" value="Resolve ' + name + '"/>');
    var $reject = $('<input type="Button" value="Reject ' + name + '"/>');

    $('body').append($resolve, $reject, "<br/>");
    $resolve.click(function () {
        $resolve.add($reject).prop("disabled", "disabled");
        def.resolve(name + " resolved");
    });
    $reject.click(function () {
        $resolve.add($reject).prop("disabled", "disabled");
        def.reject(name + " rejected");
    });
    return def.promise();
}

function sequentialTest() {
    AsyncAction("Action 1").done(function (data) {
        console.log(data);
    }).fail(function (data) {
        console.log(data);
    }).then(function () {
        AsyncAction("Action 2")
            .done(function (data) {
            console.log(data);
        }).fail(function (data) {
            console.log(data);
        });
    });
}

function parallelTest() {
    $.when(AsyncAction("Action 3"), AsyncAction("Action 4")).done(function(data1, data2){
        console.log("parallel resolved all");
        console.log(" - " + data1);
        console.log(" - " + data2);
    }).fail(function(data1){
        console.log("parallel failed at least one");
        console.log(" - " + data1);
    });
}

$(function () {
    console.clear();
    $('#Sequential').click(sequentialTest);
    $('#Parallel').click(parallelTest);
});