强制重绘事件立即进入浏览器事件队列

Question

当您对DOM进行更改时，会将这些更改放入事件队列并执行相应的操作。但是，据我所知，这个DOM修改触发的实际重绘事件是动态发生的，然后放在现有队列中的最后一个，无论可能已包含什么。

有没有办法显式请求浏览器进行重绘，将其以与所有其他语句相同的顺序方式放入事件队列中？

_{这不是XY问题，我知道我可以使用setTimeout暂时将队列留空，以便首先执行重绘。由于这是一个常见的策略，我意识到我的问题的答案可能是 no ，但我不想妄下结论。}

Answer 1

如果我正确理解你的问题，问题是你需要在另一个开始之前应用一个DOM操作，因为后者依赖于前者发生的事情。这是转型中的经典之作。例如，动画。

一种方法是向浏览器询问有关您将要修改的DOM对象的实际客户端显示属性的信息。这将导致它首先应用任何挂起的DOM更改，然后报告您请求的信息。例如：

var div = document.getElementById('div-to-animate');
div.style.transition = 'transform 5s linear';

// Here's the magic -- we need our transition rule to be applied
// before the transform rule below, or else our div will immediately
// jump left, so we ask for its client rectangle:
var rect = div.getBoundingClientRect();

// Now we can animate it safely:
div.style.transform = 'translate(-100px, 0)';

希望这有帮助！