I am trying to use an element on page as a progress indicator (in percents).
However, when I call innerText inside of for loop, Chrome freezes and does not show the progress. Here is the sample code (just to showcase the issue):
<!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 works with it OK; however, Chrome freezes until for loop is fully done.
Could anyone help me out with this? Thanks!
Here is how I solved it at the end:
<!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>