在完全应用更改之前，jQuery 的 css 方法是不是会阻塞？

Posted 2023-02-21

【中文标题】在完全应用更改之前，jQuery 的 css 方法是不是会阻塞？

【英文标题】：Does jQuery's css method block until the change is fully applied?在完全应用更改之前，jQuery 的 css 方法是否会阻塞？

【发布时间】：2013-09-08 13:04:52

【问题描述】：

在使用 jQuery 的 css 函数应用 CSS 更改后，我想要执行一些计算。此方法是否会等到 CSS 更改完全应用并重新绘制元素完成？

【问题讨论】：

您对它的工作方式并没有太多控制权。但是，您可以应用 CSS 更改，然后在此后不久发生的超时中安排后续工作。

你见过***.com/questions/7974761/…吗？

是的，你可以在这里看到：james.padolsey.com/jquery/#v=1.10.2&fn=css

【参考方案1】：

您的问题的真正答案是否，它不会等待，即使它应该等待，因为操作似乎是同步的 - 代码明智。

如果你想在设置 css 规则后立即做某事，你需要使用持续时间为 0 的 jQuery animate 函数：

    $('#my-selector').animate(
        'my-css-property-name': 'my-css-property-value'
    , 
        duration: 0,
        done: function(animation, jumpedToEnd) 
            // Your callback here
        
    )

如需了解更多done函数参数，请查看documentation.

【参考方案2】：

您会在不同的浏览器中看到不同的行为，因为 jQuery 使用内联样式更新标记，并且浏览器决定何时重绘。例如，IE 似乎会错过很多后续的样式更改间隔——它似乎需要等待一点时间才能稳定下来，但我怀疑这只是渲染引擎的本质。 Firefox 和 Chrome 会更新得更快一些。

问题：您是否在让动画顺利执行时遇到问题？看一下步骤：动画中的事件。

我使用类似于@bfavaretto 建议的 setInterval 和 clearInterval 来管理 IE 动画上的单个帧补间，因为它在绘制连续更新时犹豫不决 - 特别是使用 jQuery UI 进度条之类的东西。

【参考方案3】：

使用 javascript 修改样式是一种同步行为。更新元素的类、ID 和内联样式将立即对元素生效，您可以安全地获取该元素的新尺寸或样式。

---

话虽如此，在各种浏览器中有一些niche bugs 不会发生重绘，除非进行非常具体的样式更改。同样，布局的重新计算是同步发生的，但您可能需要做一些额外的工作来强制重新绘制发生。