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 = $.when(promise, delay(i, delays[i], $('#' + i)));
}
promise.done(function(){
    $('body').append("All done!<br/>");
    arr= arguments;
    while (arr){
        $('body').append(arr[1]).append("<br/>");
        arr = arr[0];
    }
});