Question

我正在显示一个大表，我想在重新渲染（重新排列列，应用过滤器）期间显示加载叠加层。有趣但window.setTimeout无济于事。似乎浏览器渲染得到了如此严重的延迟，它赶上了超时延迟渲染事件，并仍然完成了优化的单一涂料批次中的所有内容。问题与最新稳定的Chrome和Firefox有关。

this.fader.show();
window.setTimeout(function(){
    self._reshuffleMenu();
    self.table.fnDraw();
}, 100);
    window.setTimeout(function(){
    self.fader.hide();
}, 200);

那么控制浏览器渲染队列的任何选项呢？

观察：

Chrome对于省略setTimout排队操作非常稳定，而Firefox则显示拆分行为 - 有时会显示加载叠加层，有时会忽略它。

注意：

我已经开始将超时设置为0，但即使100ms渲染仍然排队
启动包含加载占位符的页面并将其替换为表行不是一个选项，因为我需要指示器显示表更改，而不是初始加载

Answer 1

Javascript运行时在大多数浏览器中都是作为单线程语言实现的，因此setTimeout也不例外。渲染完成后，运行时引擎会检查timout事件，并触发它们。

也许您可以在这里找到更多答案：

why Javascript SetTimeout() is not multithreaded

Answer 2

我能够通过requestAnimationFrame实现所需的行为。该技术基于调用第一帧进行叠加显示，并在下一次请求中进行重度渲染。

requestAnimationFrame(function(){
     mvc.Fader.show(self.region);
     requestAnimationFrame(callback);
});

在研究期间，我发现这个How to test (automatedly) that an operation occurs after browser repaint?给了我一个requestAnimationFrame的提示。链接列出了我还没有尝试过的另外两个技巧。

如何在DOM注入之后和大量DOM操作之前强制浏览器重绘（setTimeout没有帮助）

2 个答案: