Question

有时我的小部件需要在鼠标离开事件中处理数百万个数据。这可能需要几秒钟，具体取决于要处理的记录。所以我决定在处理前显示等待弹出窗口。

问题是等待弹出窗口（div overlay）完全不可见。如果我在延迟10毫秒以上的setTimeout中进行处理，则叠加层可见并按预期工作。

叠加div

<div style="background: black; opacity: 0.6; position: absolute; z-index: 1000; pointer-events: none; width: 810px; height: 450px; left: 8px; top: 29px; display: none;"></div>

在鼠标离开事件中，

overlay.style.display = "block";
widget.processRecords(data); //this function may take seconds depending upon data
overlay.style.display = "none";

我知道绝对定位应该触发最小的回流。但它没有用。我想也许我的div元素有问题。但是运行上面的代码延迟10毫秒，我可以看到覆盖，直到小部件完成处理

延迟叠加

overlay.style.display = "block";
window.setTimeout(function(){
    this.processRecords(data); //this function may take seconds depending upon data
    overlay.style.display = "none";
}, 10);

添加延迟有效，但浪费了10毫秒的处理时间。有没有其他方法可以强制浏览器重排绝对定位的元素。我看到其他关于强制回流的堆栈溢出问题，但没有一个有一个可靠的答案。我还提到了以下链接来强制重排一个元素 https://gist.github.com/paulirish/5d52fb081b3570c81e3a但除了延迟之外，它们都没有任何影响。

浏览器：Chrome，版本：53

修改我问这个问题是为了更多地了解浏览器中的重排以及如何控制它们。解决另一个问题有许多缺点。

1）数据处理应该不必要地等待10毫秒

2）如果它是一个简单的函数，我可以轻松地在setTimeout或setInterval中使用它。但我正在处理一个处理KB代码的小部件。它需要对延迟进行大量更改。

3）如果我需要更改20 div元素的样式，那么将浪费200毫秒

4）其他问题的解决方案在超时内使用超时等等进行处理。

我只是说其他问题的答案不适合这种情况。应该有其他方法或方法来使用JavaScript触发浏览器的重排，我正在寻找它。

鼠标离开事件

0 个答案: