SO55441832

<!doctype html>

<html>
  <head>
    <link rel="stylesheet" href="lib/style.css">
  </head>

  <body>
    <form id='main'>
      <fieldset class='base'>
        <legend>Synchronous AJAX</legend>
        <ol></ol>
      </fieldset>
      <button>GO</button>
    </form>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="lib/script.js"></script>
  </body>
</html>

.set::before {
  content: attr(id);
  font: 400 16px/1 Consolas;
}

button {
  font: inherit;
  float: right;
}


const main = document.forms[0];

const loader = async(time = 700) => {
  const ajax1 = () => {
    return new Promise(resolve => {
      setTimeout(() => resolve($('.base ol').append($('<li>').load('comp.html #set1'))), time);
    });
  }
  const ajax2 = () => {
    return new Promise(resolve => {
      setTimeout(() => resolve($('.base ol').append($('<li>').load('comp.html #set2'))), time);
    });
  }
  const ajax3 = () => {
    return new Promise(resolve => {
      setTimeout(() => resolve($('.base ol').append($('<li>').load('comp.html #set3'))), time);
    });
  }
  const ajax4 = () => {
    return new Promise(resolve => {
      setTimeout(() => resolve($('.base ol').append($('<li>').load('comp.html #set4'))), time);
    });
  }

  await ajax1();
  await ajax2();
  await ajax3();
  await ajax4();

}

const getComp = e => {
  e.preventDefault();
  loader();
}

main.onsubmit = getComp;

<!doctype html>

<html>
  <head>
    <link rel="stylesheet" href="lib/style.css">
  </head>

  <body>
    <ol>
      <li><fieldset id='set1' class='set'></fieldset></li>
      <li><fieldset id='set2' class='set'></fieldset></li>
      <li><fieldset id='set3' class='set'></fieldset></li>
      <li><fieldset id='set4' class='set'></fieldset></li>
    </ol>

  </body>
</html>