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

因此，在对我遇到的问题进行了大量搜索之后，我发现我遇到的问题是，因为当我将css应用于元素时，信息不是立即可用的，我的意思是：

我用

display:block隐藏并显示了一个元素和
显示：无，问题是在显示元素后，我需要获得其高度：

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

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

在弄清楚这一点后，延迟1毫秒不可能是某种继承的转换或任何东西，因此让我想到，在从
display:block的跳转之间
到
.outerHeight（）
有些东西还没有更新，经过一番挖掘后我发现：

Quote：“您将在不同的浏览器中看到不同的行为，因为jQuery正在使用内联样式更新标记，浏览器决定何时重新绘制”


这似乎是我的实际问题，所以现在的问题是，我如何确定重新绘制何时发生，我尝试了
onload
，
load
事件，但没有一个事件被触发

我还尝试了那篇文章中建议的动画代码：

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

但这也不起作用。
您面临的问题是，您无法真正控制浏览器显示更改的方式。正如您所指出的，这些信息不是立即可用的，尽管超时从技术上讲是一种解决方案，但它缺乏优雅性，并且会危及您的UI进入

您需要测试什么，以查看更优雅的解决方案是否有效

1.它是否在0毫秒内工作
如果工作时间为0毫秒，则基本上在成功执行
函数
之后以及在运行来自的下一个
函数
之前刷新UI

2.在没有jQuery的情况下是否会有不同的行为
比较

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

与

for（让index=0；index<$element.length；index++）{
$element[index].style.display=“block”；
}

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

结论
作为一般指导，您可能需要类似回调的行为，为了实现这一点，您可能需要使用。如果可以的话。
我刚刚尝试过，是的，它确实可以在0毫秒的时间内工作，我也尝试过纯JS，没有超时
document.getElementsByClassName（“classofelement”）[0]。style.display=“block”这不起作用，所以这不是jQuery的问题。我可以用承诺来做，但是，我不知道，我需要等待什么，我可以使用什么函数。然后（）继续，这样我可以在事件循环运行后做我想做的任何事情？@Darkbound所以，大概这就是流程：1。您的函数将更改一些CSS值2。函数结束于3。浏览器根据CSS更改显示一些更改，随后属性值将更改4。执行下一个函数。回调成功的原因是3。发生在2点之间。四,。立即访问失败的原因是，在这种情况下，您将属性包含在1之间。和2，在3之前。这就是问题所在，这也是类似回调的行为起作用的原因。@Darkbound有关详细信息，我建议您可以阅读有关事件循环的内容，然后了解Javascript如何处理函数调用。假设您知道事件循环是如何工作的，那么您需要的信息是在函数调用之间刷新UI。Javascript是单线程的，浏览器在函数内部进行更改是次优的，因为可能会有多个更改。@Darkbound假设您有一个包含1000个UI更改的函数，如果浏览器单独进行这些更改，那么，从用户的角度来看，它很快就会不知所措，毫无用处。由于浏览器在该模型中会有糟糕的UX，因此可以推测（我之前的实验也证实了这一点）浏览器在JS函数运行时不会刷新UI。因此，它必须刷新事件循环中节点之间的UI。@Darkbound注意，您可以使其易于使用：
函数myFunction（callback）{setTimeout（callback，0）；}
，然后您可以将其称为myFunction（callback），在使用它时不必担心setTimeout。
$element.css({ display: "block"});

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