在 XMLHTTPRequest.onreadystatechange 中更新 HTML5 进度条答案

【问题标题】：Updating HTML5 Progress Bar within XMLHTTPRequest.onreadystatechange在 XMLHTTPRequest.onreadystatechange 中更新 HTML5 进度条
【发布时间】：2023-03-03 10:37:01
【问题描述】：

将 XMLHttpRequest 中的两个 HTML5 进度条更新为：

for (var i = 0; i < times.value; i++) {
    xhr.open("POST", uri, false);
    xhr.send(payload);
    restSendBar.value += 100 / times.value;
    console.log(i + "th times");
}

和

xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
      restRxBar.value += 100 / times.value;
  }
};

在 Firefox 中，进度条会随着 for 循环的执行而更新。在 Chrome 中，for 循环完成后会更新进度条。

这是更新进度条的正确方法吗？

这是 Chrome 中的错误吗？

阿伦

【问题讨论】：

标签： html google-chrome firefox xmlhttprequest progress-bar

【解决方案1】：

这可能是 Chrome 对方法调用的优先级与 Firefox 不同。尝试使用setTimeout“带外”更新进度条：

setTimeout(function() {
  // Update progress bar here
  restRxBar.value += 100 / times.value;
}, 0);

【讨论】：

一些周围的代码会有所帮助。我将在哪里设置这个时间？
您将用它代替您的restRxBar.value 电话。
还是没有变化，for循环后进度条更新了。