JSFiddle - React, Tailwind, and code Playground

by marlberm2014

HTML

<a href="#">Click me!</a>
<div></div>

JavaScript

function GetSomeDeferredStuff() {
    var i = [1,2,3,4,5,6,7,8,9,10];
    var deferreds = $.map(i, function (count, index){
        var waitingProcess = new $.Deferred();
        if(count == 7) {
            $.Deferred().fail(function(){
                $("div").append("<p>Task #" + count + " failed.");
                waitingProcess.resolve();
            }).reject();
        }else{
            $.post('/echo/html/', {
                html: "<p>Task #" + count + " complete.",
                delay: count
            }).success(function(data) {
                $("div").append(data);
                waitingProcess.resolve();
            });
        }
        return waitingProcess.promise();
    });
    
    return deferreds;
}

$(function() {
    $("a").click(function() {
        var deferreds = GetSomeDeferredStuff();

        $.when.apply($,deferreds).done(function() {
            $("div").append("<p>All done!</p>");
        }).fail(function(){
            $("div").append("<p>Something failed!</p>");
        });
    });
});