这是一个困扰我一段时间的问题。我已经实现了一个 HTML5 progress
元素,如下所示:
<progress id="progress" value="0" max="100"></progress><output class="percent" id="percent">0</output><span class="prozent">%</span>
假设我在 JS 循环中更新 progress
和 percent
的值:
i = 0;
pBar = document.getElementById('progress');
pBar.value = i;//start at 0%
percent = 1;//set target for next progress bar update in %
//DO
do {
//IF(i > i_max) EXIT
//CALL VERLET
VERLET(i, x, v, a, time, const0, gamma, A_o, omega, dt);
x_plot[i] = [time[i], x[i]];
v_plot[i] = [time[i], v[i]];
a_plot[i] = [time[i], a[i]];
//i = i + 1
i = i + 1;
if (parseInt(i / i_max * 100, 10) === percent) {
pBar.value = percent;//update progress bar
document.getElementById('percent').innerHTML = percent;
percent = percent + 1;
}
//END DO
} while (i < i_max);
这是我的脚本的相关部分。 请假设所有变量均已正确声明和初始化,并且整个脚本已检查完毕。可以在 here 找到该页面的草稿。 .
我不明白为什么 progress
和 output
元素的值直到计算完成后才更新。或者这就是看起来正在发生的事情。 IE11(?)似乎在最初加载页面时显示一些更新,但在不重新加载的情况下再次不会更新新计算的进度条。
Here是类似的东西,但不使用这种现代方法。我尝试获取 this工作的例子,但没有成功。 This例如,尽管我认为写得更好,但可能会阐明问题。
是不是超时的问题?有没有我可以使用的简单 jQuery 方法?对此问题的任何反馈将不胜感激。
最佳答案
您无法在单个 while 循环中执行此类操作。
发生的情况是循环将一直运行直到结束,并且您只能在完成操作时看到结果。
对于此类问题,您应该采用异步方式。
function updateDom() {
// do stuff
setTimeout(updateDom, 500);
}
setTimeout(updateDom, 500);
关于javascript - HTML 进度元素未更新,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27821961/