DOM 更改不会立即执行

Question

所以我有一个隐藏元素，我想显示它，然后立即触发警报。

我尝试使用jquery：

$('#myElement').show();
alert('test');

我也尝试过只使用常规的 javascript：

document.getElementById('myElement').setStyle('display: block');
alert('test');

但是，在这两种情况下，我看到当我运行此命令时，会出现警报，我的元素仍然不可见，然后一旦我关闭警报，该元素就会开始显示。

为什么警报在 DOM 更新之前运行？我有什么方法可以强制更新 DOM，还是需要在显示元素后添加手动超时？

我尝试过使用 $.then() 和 $.done() 但似乎都不起作用。

Answer 1

由在主 JavaScript 事件循环上运行的 JS 触发的浏览器重绘。

DOM 正在更新，但直到 JS 不忙于其他事情时它的渲染才会完成。

这alert()是阻塞的，因此主事件循环上的所有 JS 都会暂停，直到它被解除。

您可以在运行警报之前等待动画帧。

document.getElementById('myElement').setStyle('display: block');
requestAnimationFrame(() => alert('test');)