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>");
        });
    });
    
    var a = new $.Deferred();
    var b = new $.Deferred();
    
    $.when(a, b).done(function(){alert("Finish First Scenario");});
    
    setTimeout(function(){
        alert("Reinit");
        a = new $.Deferred();
        b = new $.Deferred();
        $.when(a, b).done(function(a, b){alert("Finish Second Scenario: " + a + " " + b); console.log(b);});
    }, 2000);
    
    setTimeout(function(){
        alert("Resolving");
        a.resolve(1);
        b.resolve(2, 3);
    }, 5000);
});