JSFiddle - React, Tailwind, and code Playground

by TrueBlueAussie

HTML

<div id="0">0</div>
<div id="1">1</div>
<div id="2">2</div>
<div id="3">3</div>
<div id="4">4</div>
<div id="5">5</div>

JavaScript

// Ajax simulation - just resolve after a given number of seconds
function delay(i, d, $e){
    var def = $.Deferred();
    setTimeout(function(){
        $e.html("Complete");
        def.resolve("I: " + i + " Delay: " + d);
    }, d * 400);
    return def.promise();
}

var delays = [5,3,4,7,2,1]
var promise = [];
for (var i = 0; i < 6; i++){
    promise.push(delay(i, delays[i], $('#' + i)));
}
$.when.apply($, promise).done(function(){
    $('body').append("All done!<br/>");
    for (var i = 0; i < arguments.length; i++){
        $('body').append(arguments[i]).append("<br/>");
    }
});