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; 到 的跳转之间。 externalHeight() 有些东西还没有更新，经过一番挖掘后我发现了这个:

引用:“由于 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 之后和 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 。如果有效的话。