JSFiddle - React, Tailwind, and code Playground

by jfriend00

HTML

<script src="http://files.the-friend-family.com/log.js"></script>
<button id="run">Press this multiple times</button><br><br>

JavaScript

// sample async function
// real-world this is an Ajax call
function delay(val) {
    log("start: ", val);
    return new Promise(function(resolve)  {
        setTimeout(function() {
            log("end: ", val); 
            resolve();
        }, 500);
    });
}

// initialize p to a resolved promise
var p = Promise.resolve();
var v = 1;

// each click adds a new task to 
// the serially executed queue
$("#run").click(function() {
    p = p.then(function() {
        return delay(v++);
    });
});