JSFiddle - React, Tailwind, and code Playground

HTML

<button onclick="window.unordered();">
 unordered
</button>
<button onclick="callbacks();">
 callbacks
</button>
<button onclick="promises();">
 promises
</button>

JavaScript

window.unordered = function() {
  function log(msg) {
    setTimeout(function() {
      console.log(msg + ' unordered');
    }, Math.random() * 100);
  }
  
  log('1');
  log('2');
  log('3');
  log('done');
}

window.callbacks = function() {
  function log(msg, callback) {
    setTimeout(function() {
      console.log(msg + ' callbacks');
      callback();
    }, Math.random() * 100);
  }
  
  log('1', function() {
    log('2', function() {
      log('3', function() {
        console.log('done');
      });
    });
  });
}

window.promises = function() {
  function log(msg, callback) {
    return new Promise(resolve => {
      setTimeout(function() {
        console.log(msg + ' promises');
        resolve();
      }, Math.random() * 100);
     });
  }
  
  log('1')
  .then(() => log('2'))
  .then(() => log('3'))
  .then(() => log('done'));
  
  /*
  log('1')
  .then(function() {
    return log('2');
  })
  .then(function() {
    return log('3');
  })
  .then(function() {
    log('done');
  });
  */
}