function

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <script src="jquery.js" type="text/javascript"></script>
    <style type="text/css">
      table {
        width: 200px;
      }
      table,
      td {
        border: 1px solid black;
      }
    </style>
    <script type="text/javascript">
      function long_running(endValue) {
          var result = 0;
          for (var i = 0; i < endValue; i++) {
              for (var j = 0; j < 700; j++) {
                  for (var k = 0; k < 300; k++) {
                      result = result + i + j + k;
                  }
              }
          }
          console.log("done calculation with endValue :" + endValue);
      }

      function fillCell(cellMessage) {
        $('#firstCell').text(cellMessage);
      }

      var step1 = {
        startMessage: "step1 started",
        endValue: 1000
      }
      var step2 = {
        startMessage: "step2 started",
        endValue: 2000
      }
      var step3 = {
        startMessage: "step3 started",
        endValue: 3000
      }
      var step4 = {
        startMessage: "step4 started",
        endValue: 1000
      }

      var objArray = [];
        objArray[1] = step1;
        objArray[2] = step2;
        objArray[3] = step3;
        objArray[4] = step4;

      function startAction() {
        for (var i=1; i<5; i++) {
          console.log(objArray[i].endValue);
          fillCell(objArray[i].startMessage);
          setTimeout(function(){ long_running(objArray[i].endValue); }, 0);
        }
      }

    </script>
</head>
<body>
  <table>
    <thead>
    </thead>
    <tr>
      <td id="firstCell">
        action
      </td>
    </tr>
  </table>
  <button type="submit" onclick="startAction();">Start</button>
</body>
</html>