javascript - HTML 进度元素未更新

Question

这是一个困扰我一段时间的问题。我已经实现了一个 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 方法？对此问题的任何反馈将不胜感激。

Answer 1

您无法在单个 while 循环中执行此类操作。

发生的情况是循环将一直运行直到结束，并且您只能在完成操作时看到结果。

对于此类问题，您应该采用异步方式。

function updateDom() {
  // do stuff

  setTimeout(updateDom, 500);
}

setTimeout(updateDom, 500);