De acuerdo, puede ser una pregunta simple, pero hasta ahora no encontré nada útil al buscar, así que lo intentaré aquí.

Estoy usando javascript/jquery simple y antiguo en asp.net core en algún proyecto en el que estoy trabajando.

Actualmente estoy realizando algunas acciones en algunos empleados en un bucle foreach. Para cada empleado, llamo sincrónicamente a través de ajax una API.

Lo que quiero es que la interfaz de usuario se actualice, mostrando al empleado actual que se está procesando en una barra de progreso.

Mientras está en depuración, el proceso parece funcionar bien, pero durante el proceso normal, parece que el subproceso de la interfaz de usuario no se actualiza, solo después de que se haya realizado todo el trabajo. Como tal, tan pronto como empiezo a procesar a los empleados, la pantalla se atasca y se cierra una vez que se ha realizado el trabajo. No se muestra ninguna barra de progreso.

Solo logré mostrar la animación de progreso y el primer empleado usando el siguiente truco

 $('#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);

})

Según tengo entendido, e.preventDefault parece mover la función de tiempo de espera que se procesa después de que finaliza el subproceso de la interfaz de usuario.

¿Cuál es la forma óptima de lograr lo que quiero?

PD: No hay bibliotecas externas si es posible. Estoy trabajando en una plataforma de terceros, lo que dificulta agregar bibliotecas externas (políticas, permisos, etc.)