Google Chrome 在一系列 XHR 调用完成之前不会呈现进度条

Question

将 toastrjs 中的进度条 (bootstrap) 添加到执行远程 apex 的列表视图上的 Salesforce.com 自定义按钮。对于列表视图中的每个选定记录，远程顶点在 for 循环中执行。进度条宽度在每次调用后更新，以显示任务进度。

当所有的 toastr 都显示时，toastr/progressbar 直到所有 xhr 调用完成后才显示。

在 Chrome 检查器中注意到只有在远程调用完成后才会 "rasterized" 渲染。

1) 这是 Google Chrome 的预期行为吗？ 2) 是否有解决方法来确保 toastr/progressbar 在每次 xhr 调用后更新？

谢谢！

Answer 1

想通了！希望这可以帮助其他人解决同样的问题。

在使用异步 XHR 时有效。请参阅此 answer 以了解如何设置回调。

Chrome（也许还有其他浏览器？）推迟 "rasterization"（实际上是在显示器上绘制像素！！）直到完成 xhr 调用 apex 方法的 for 循环。如果进度条更新是在循环内完成的，则只有在循环结束后才能看到结果。

通过将进度条更新移动到回调中：

1. 一开始所有的xhr都在排队（当进度为零时），
2. 显示初始进度条，
3. 随着每个 xhr 成功（或失败），进度条会更新。

参见 codepen for an example of how this would be done in a pure javascript+xhr(createCORSRequest) 场景。

for(i = 0; i < total; i++) {
  xhr = createCORSRequest(method, url);
  xhr.onload = function() {
    // Success code goes here.
    done++;
    processbarupdate(done / total * 100);
  };
  xhr.onerror = function() {
    // Error code goes here.
    done++;
    processbarupdate(done / total * 100);
  };
  xhr.send();
}