当使用JS/Jquery动态更改元素时，等待元素的CSS更新 [英] Wait for css of element to be updated when it is dynamically changed with JS/Jquery

问题描述

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

So after a lot of searching about an issue that I am having, I figured out that the issue that I am having is, because when I apply css to the element, the info is not immediatelly available, here is what I mean:

我有一个要隐藏并显示的元素，显示为 display:block; 和 display:none; ，问题是在显示元素之后，我需要获取其高度:

I have an element that I am hiding and showing with display: block; and display: none;, the issue is that right after I show the element, I need to obtain its height:

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

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

因此，我开始尝试在某个时间点进行超时，即使超时时间为1毫秒，它仍然可以正常工作并返回正确的高度:

So I started experimenting with timeouts at some point, and even with a 1ms timeout, it still works and returns the correct height:

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

弄清楚了这一点之后，延迟了1毫秒，它不可能是某种继承的过渡或任何东西，因此让我想到也许是在从 display:block; 到的跳转之间.externalHeight()某些内容尚未更新，经过一番挖掘，我发现了这一点:

After figuring that out, with 1 ms delay it could not be some inherited transition or anything, so that got me thinking that maybe, between the jump from display: block; to .outerHeight() something is not yet updated, after some digging I found this:

报价:由于jQuery使用内联样式更新标记，并且浏览器决定何时重新粉刷，因此您将在不同的浏览器中看到不同的行为."

Quote: "You'll see different behaviors in different browsers since jQuery is updating the markup with inline styles and the browser decides when to repaint."

执行jQuery的css方法块直到更改是否已完全应用?

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

And this seems to be my actual problem, so the question now is, how do I figure out when that repainting has happened, I have tried with onload, load events but none of them get triggered.

我还用动画尝试了该帖子中的建议代码:

I have also tried the suggested code in that post with animation:

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

但这也不起作用.

推荐答案

您遇到的问题是，您实际上无法控制浏览器如何显示更改.正如您所指出的那样，该信息不是立即可用的，尽管从技术上讲超时是一种解决方案，但它缺乏优雅感，并危及您进入回调地狱.

The issue you are having is that you do not really have control on how the browser is displaying changes. The information is not immediately available, as you have pointed out and even though doing timeouts is technically a solution, it lacks elegance and endangers your UI of getting into callback hell.

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

What you will need to test in order to see whether more elegant solutions work is

如果工作时间为0毫秒，则基本上在成功执行 function 之后和function 之前刷新UI.://developer.mozilla.org/zh-CN/docs/Web/JavaScript/EventLoop"rel =" nofollow noreferrer>事件循环正在运行.

If it works with 0 milliseconds, then basically the UI is refreshed just after the function is successfully executed and before the next function from the event loop is running.

比较行为

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

使用

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

是等效的.如果是这样，那么这不是jQuery问题.如果没有，那就是jQuery的问题.

is equivalent. If so, then it's not a jQuery problem. If not, then it's a jQuery problem.

作为一般指导，您可能需要类似回调的行为，并且可能需要使用

As a general guidance, you will probably need a callback-like behavior and to achieve that you will probably want to use the promise architecture. If it works.

这篇关于当使用JS/Jquery动态更改元素时，等待元素的CSS更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！