Promise.all([ seperatingDMCM(), compileDirectMessage(), renderingResult(), addResultButtonListener(), ]);

Tengo una barra de progreso en mi interfaz de usuario y tengo 4 funciones mencionadas anteriormente, cada una de las cuales devuelve una Promesa. Tengo un bucle dentro de la primera función que separa DMCM(), que manejará todos mis datos. Quiero incrementar la barra de progreso con cada incremento del ciclo. Lo que significa que cada iteración del bucle debe ser asíncrona, por lo que la interfaz de usuario se actualizará y solo después se repetirá el bucle. Cuando el ciclo haya terminado, quiero devolver una promesa para que las otras funciones comiencen a ejecutarse. Me enfrento a un problema de que la barra de progreso no funciona como se supone y se invoca inmediatamente cuando seperatingDMCM() devuelve la promesa () y no de forma asíncrona. Esta barra de progreso se actualiza inmediatamente al 100 % en la página siguiente en lugar de actualizaciones en vivo con un pequeño incremento en la página actual.

Esta es mi función updateUI:

 function startProgressBar(i, arr) { return new Promise((resolve) => { setTimeout(() => { i = (i * 100) / arr.length; console.log(i); let elem = document.getElementById("progressBar"); if (i < 100) { elem.innerText = i + "%"; elem.style.width = i + "%"; elem.innerHTML = i + "%"; resolve(); } }, 0); }); }

Esta es mi primera función en la que quiero actualizar la interfaz de usuario por iteración de bucle

 function seperatingDMCM() { const contentType = "Content type"; return new Promise((resolve) => { rowObject.forEach(async (row, index) => { const creatingInts = () => { console.log("CreatedInt at", index); row["Date created (UTC)"] = ExcelDateToJSDate( row["Date created (UTC)"] ); if ( row[contentType] !== "DM" && row.hasOwnProperty("Falcon user name") ) { publicCommentsCount++; interaction = { row : row}; compiledInteractions.push(interaction); interaction = {}; } else { dmData.push(row); } }; startProgressBar(index, rowObject).then(creatingInts()); }); quickSort(dmData, "Falcon URL"); console.log("SORTED", dmData); console.log(workbook); console.log("Rows", rowObject); resolve(); }); }