当使用 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 的 UI。

您需要测试哪些更优雅的解决方案是否有效

1。是否在 0 毫秒内工作

如果它的工作时间为 0 毫秒，那么基本上 UI 会在 function 成功执行之后和 event loop 的下一个 function 运行之前刷新。

2。不使用 jQuery 的行为是否不同

比较行为

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

与

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

是等价的。如果是这样，那么这不是 jQuery 问题。如果不是，那就是 jQuery 的问题。

结论

作为一般指导，您可能需要类似回调的行为，并且您可能需要使用promise architecture。如果有效。