Question

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

直到所有xhr调用完成，并且所有toastrs一次显示时，才会显示toastr / progressbar。

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

1）这是Google Chrome的预期行为吗？ 2）是否有解决办法确保每次xhr呼叫后更新toastr / progressbar？

谢谢！

Answer 1

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

使用异步XHR时可以正常工作。有关如何设置回调的信息，请参阅此answer。

Chrome（可能还有其他浏览器？）推迟了光栅化＆＃34;（实际上是在显示屏上绘制像素!!），直到xhr调用apex方法的for循环完成。如果进度条更新在循环内完成，则只有在循环结束后才会看到结果。

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

所有xhrs在开头排队（当进度为零时），
显示初始进度条，
当每个xhr成功（或失败）时，进度条会更新。

有关如何在纯javascript + xhr（codepen）方案中执行此操作的示例，请参阅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();
}

在完成一系列XHR调用之前，Google Chrome无法呈现进度条

1 个答案: