JSFiddle - React, Tailwind, and code Playground

HTML

<p>Open console.</p>
<p>Click the two buttons as many times as you like, in any order you like, and as fast as you like.</p>
<p>The log entries will be reflect the order of your clicks.</p>
<button id="A">queue A</button>
<button id="B">queue B</button>

JavaScript

// *** Queue logic ***
var q_ = Promise.resolve();

function queue(fn) {
  q_ = q_.then(fn);
  return q_;
}

// *** DEMO ***
// "long running" async function
function A() {
  return new Promise(function(resolve, reject) {
    setTimeout(resolve, 2000);
  });
}
// "short running" async function
function B() {
  return new Promise(function(resolve, reject) {
    setTimeout(resolve, 100);
  });
}

var counter = 0;
$("#A").on('click', function() {
  var count = ++counter;
  queue(A).then(function() {
    console.log(count + ' A');
  });
});
$("#B").on('click', function() {
  var count = ++counter;
  queue(B).then(function() {
    console.log(count + ' B');
  });
});