javascript - 使用JS/Jquery动态更改元素时，等待元素的css更新

Question

因此，在对我遇到的问题进行了大量搜索之后，我发现我遇到的问题是，因为当我将 css 应用于元素时，信息不会立即可用，这就是我的意思:
我有一个元素，我正在隐藏和显示 display: block;和 display: none; ，问题是在我显示元素之后，我需要获取它的高度:

$element.css({ display: "block"});

console.log($element.outerHeight()); // <- this returns 0

所以我在某个时候开始尝试超时，即使超时 1 毫秒，它仍然有效并返回正确的高度:

setTimeout(() => {
    console.log($element.outerHeight()); // with 1ms timeout, it works and gives real height
}, 1)

弄清楚之后，延迟 1 毫秒，它不可能是某种继承的转换或任何东西，所以这让我想到也许，在从 display: block; 跳转之间至 .outerHeight()有些东西还没有更新，经过一番挖掘，我发现了这个:
引用:“您会在不同的浏览器中看到不同的行为，因为 jQuery 正在使用内联样式更新标记，而 浏览器决定何时重新绘制 。”
Does jQuery's css method block until the change is fully applied?
这似乎是我的实际问题，所以现在的问题是，我如何确定重绘何时发生，我已经尝试过 onload , load事件，但没有一个被触发。
我还尝试了该帖子中带有动画的建议代码:

$element.animate({
  display: 'block'
}, {
  duration: 0,
  done: function(animation, jumpedToEnd) {
    console.log($element.outerHeight());
  }
})

但这也不起作用。

Answer 1

您遇到的问题是您无法真正控制浏览器如何显示更改。该信息不是立即可用的，正如您所指出的，尽管从技术上讲超时是一种解决方案，但它缺乏优雅并危及您进入 callback hell 的用户界面。 .
为了查看更优雅的解决方案是否有效，您需要测试什么
1.是否工作在0毫秒
如果它在 0 毫秒内工作，那么基本上 UI 会在 function 之后刷新。成功执行并在下一个 function 之前来自 event loop在跑。
2. 不使用 jQuery 是否表现不同
比较行为

$element.css({ display: "block"});

和

for (let index = 0; index < $element.length; index++) {
    $element[index].style.display = "block";
}

是等价的。如果是这样，那么这不是 jQuery 问题。如果没有，那么这是一个 jQuery 问题。
结论
作为一般指导，您可能需要类似回调的行为，并且为了实现这一点，您可能需要使用 promise architecture .如果它有效。