我可以使用javascript强制浏览器"刷新"任何挂起的布局更改吗？

Question

我有一个使用Javascript构建UI的库,由于涉及动态内容,我有时希望将内容放到浏览器中,检查布局是如何更改以支持这一点,然后根据结果执行不同的逻辑.例如:检测某些文本是否溢出并使用省略号截断它.

通常我通过发出更改来实现它,然后使用window.setTimeout(0)来等待布局更新并调用其余的逻辑.这显然是次优的,因为不同的浏览器可能实现的最小超时太慢而不能防止使用大量CPU的闪烁或更快.

理想情况下,我想进行DOM更改,然后强制布局同步更新并立即内联运行"修复"逻辑.有任何想法吗？

Answer 1

我的理解是,读取任何CSS属性都会强制重排.你根本不需要setTimeout.

摘录摘录:重绘,重排/重新布局,重新设计:

但有时脚本可能会阻止浏览器优化回流,并使其刷新队列并执行所有批量更改.当您请求样式信息时会发生这种情况,例如

 offsetTop, offsetLeft, offsetWidth, offsetHeight
 scrollTop/Left/Width/Height
 clientTop/Left/Width/Height
 getComputedStyle(), or currentStyle in IE

以上所有这些都基本上是在请求有关节点的样式信息,而且只要您这样做,浏览器就必须为您提供最新的值.为此,它需要应用所有计划的更改,刷新队列,咬住子弹并进行重排.

以下是将触发重排的API调用/属性列表.

Answer 2

我们在 IE8 上遇到了一个疯狂的问题（Firefox、Chrome 都可以）。我们在子元素上使用toggleClass('enoMyAddressesHide')。

.enoMyAddressesHide{display:none}

但父级 div 容器不会刷新/重新布局其高度。

setTimeout()、读取位置、读取元素的宽度和高度没有帮助。最后我们可以找到一个可行的解决方案：

jQuery(document).ready(function ($) {
    var RefreshIE8Layout = function () {
        $('.enoAddressBook:first').css('height', 'auto');
        var height = $('.enoAddressBook:first').height();
        $('.enoAddressBook:first').css('height', height);
    };

    $(".enoRowAddressInfo .enoRowAddressInfoArea ul li img.enoMyAddresses").click(function () {
        $(this).parent().find(".enoAllInfoInAddressBox,img.enoMyAddresses").toggleClass('enoMyAddressesHide');

        RefreshIE8Layout(); // fix IE8 bug, not refresh the DOM dimension after using jQuery to manipulate DOM
    });
});

看起来很蠢，但是很有效！