Async

by pw_we1

HTML

<button id="start">Start</button><br>
<div id="divs">

</div>

CSS

#divs {
 width:370px;
 float:clear;
 border:1px solid;
}
div {
 height:50px;
 float:left;
}
.js {
  background-color:lightgray;
}

JavaScript

var start, iv;
$("#start").click(function(){
 $("#divs").empty();
 start = Date.now();
 iv = setInterval(drawRect,400, "red");
 setTimeout(drawRect,3000, "green");
 setTimeout(drawRect,1500, "blue");
 setTimeout(drawRect,1000, "lime");
 setTimeout(drawRect,0, "magenta");
 drawRect("orange");
})
function drawRect(color){
 var time = Date.now() - start;
 $("#divs").append(
  $("<div>").addClass("js")
            .css("width",time/10));
 $("#divs").append(
  $("<div>").css("background-color",color)
            .css("width","5px"));
 start += time;
 if (color == "green") clearInterval(iv);
}