JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://raw.github.com/ricmrodrigues/runasync/master/dist/runasync.js"></script>
<button id="clickme">Click me!</button>
CSS
button {
position: absolute;
left: 0;
top: 0;
}
JavaScript
document.querySelector("button").addEventListener("click", function () {
var start = new Date();
for (var x = 1; x <= 3; x++) {
(function (idx) {
var millisecondsToWait = 500;
setTimeout(function () {
$("body").append("<button>yay....</button>");
}, millisecondsToWait);
var response = 0,
max = (89000000 * (idx * 3));;
for (var i = 0; i < max; i++) {
i++;
if (i === max - 1) response = i;
}
$('#clickme').text("#" + idx + " done!");
console.log("my async code #" + idx + " completed!!");
console.log("output: " + response);
console.log("result from task " + response);
})(x);
}
$('button').animate({
left: '+=250',
top: '+=200'
}, 5000, function () {
console.log("animation done!");
});
console.log("took " + (new Date(new Date()-start)).getMilliseconds()+ "ms");
}, false);