Estoy tratando de usar un elemento en la página como indicador de progreso (en porcentajes). Sin embargo, cuando llamo a innerText dentro de for loop, Chrome se congela y no muestra el progreso. Aquí está el código de muestra (solo para mostrar el problema):
<!DOCTYPE html> <html> <head> <title>Hello</title> <meta charset="utf-8"/> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </head> <body> <h1 id="a">Hello!</h1> </body> <script type="text/javascript"> function initTrs(){ for(var i = 1; i<=100; i++){ document.getElementById("a").innerText = i; $.ajax({ url: "https://www.google.com", async: false, done: function (a) {} }); } } window.addEventListener("load", () => initTrs()); </script> </html> Firefox funciona bien; sin embargo, Chrome se congela hasta que el bucle for está completamente terminado.
¿Alguien podría ayudarme con esto? ¡Gracias!
Así es como lo resolví al final:
<!DOCTYPE html> <html> <head> <title>Hello</title> <meta charset="utf-8"/> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </head> <body> <h1 id="a">Hello!</h1> </body> <script type="text/javascript"> function initTrs(){ for(var i = 1; i<=100; i++){ const iter = i; setTimeout(() => { document.getElementById("a").innerText = iter; $.ajax({ url: "https://www.google.com", async: false, done: function (a) {} }); }); } } window.addEventListener("load", () => initTrs()); </script> </html>