Okay, it might be a simple question, but so far I didn't find anything helpful by searching, so I am giving it a try here.

I am using plain old javascript/jquery on asp.net core on some project I am working on.

I am currently performing some actions on some employees in a foreach loop. For each employee I am calling synchronously via ajax an API.

What I want is the UI to be updated, showing the current employee being processed in a progress bar.

While on debug, the process seems to work fine, but during normal process, it seems that the UI thread is not updated, only after all the work has been done. As such, as soon as I start processing the employees, the screen is stuck and closes after the work has been done. No progress bar is shown.

I only managed to show the progress animation and the first employee using the below trick

$('#applyYes').click(function (e) {
   e.preventDefault();

   var year = $('#yearCombo').val();

   $('#applyInfo').hide();
   $('#applyLoad').show();
   $('#applyAction').prop('innerText', 'Calculating...');

   setTimeout(function () {

      var employeeIDs = multipleEmployees_Array();
      for (var i = 1; i <= employeeIDs.length; i++) {
         employeeID = employeeIDs[i - 1];
         applyAmount(employeeID, year); //1. Updates progress bar 2. Ajax sync call
      }

   }, 0);

})

As far as I understand the e.preventDefault seems to move the timeout function being processed after UI thread finishes.

What is the optimal way of achieving what I want?

PS: No external libraries if possible. I am working on an third-party platform, that makes it difficult to add external libraries (policies, permissions etc.)