У меня есть al oop, который некоторое время обрабатывает данные, поэтому я хотел бы показать индикатор выполнения, пока l oop обрабатывается. Я пробовал обновлять индикатор выполнения на каждой итерации l oop:
let data = new Array(1000000); //large input data
let progress_bar = document.getElementById('progress_bar');
let progress_text = document.getElementById('progress_text');
let progress = 0;
let full = data.length;
for (let row of data) {
progress_bar.style.width = (100 * progress / full) + '%';
progress_text.innerHTML = Math.round(100 * progress / full) + '%';
processData(row);
progress += 1;
}
function processData(input) {
//process the line of data
}
#progress_track {
height: 5px;
width: 80vw;
margin-left: 10vw;
background: #888;
}
#progress_bar {
background: #54f;
height: 5px;
width: 0;
}
#progress_text {
font-size: 18px;
width: 100vw;
text-align: center;
}
<!DOCTYPE html>
<html>
<head></head>
<body>
<div id='progress_track'>
<div id='progress_bar'></div>
</div>
<div id='progress_text'>0%</div>
</body>
</html>
Как видите, он обновляется сразу в конце.
Здесь объясняется что JavaScript обновляет пользовательский интерфейс только в конце чего-то столь быстрого, поэтому я попытался заменить
progress_bar.style.width = (100 * progress / full) + '%';
progress_text.innerHTML = Math.round(100 * progress / full) + '%';
на
if ((progress % 1000000) == 0) {
progress_bar.style.width = (100 * progress / full) + '%';
progress_text.innerHTML = Math.round(100 * progress / full) + '%';
}
, но это дало тот же результат.
Я также пробовал использовать setTimeouts и setInterval, но мое понимание обратных вызовов не так хорошо, поэтому я случайно получил доступ к данным до их обработки.