我可以使用JavaScript来强制浏览器QUOT＆;＆冲洗QUOT;任何挂起的布局变化？ [英] Can I use javascript to force the browser to "flush" any pending layout changes?

问题描述

我有一个建立使用Javascript UI库，并因为涉及我有时想将内容输出到浏览器的动态内容，检查布局如何改变来支持这个，然后做根据结果不同的逻辑。例如：如果发现一些文字是满溢并以省略号截断

I have a library that build UI using Javascript, and because of the dynamic content involved I sometimes want to put content out to the browser, examine how the layout was changed to support this and then do a different logic depending on the result. For example: detect if some text is overflowing and truncate it with an ellipsis.

一般我由扑灭的变化，然后用window.setTimeout（0），以等待布局更新和调用逻辑的其它部分实现这一点。这显然​​是次优的为不同的浏览器既可以实现的最小超时是太慢了prevent闪烁或使用了大量的CPU快。

Usually I implement this by putting out the changes, then using window.setTimeout(0) to wait for the layout to update and invoke the rest of the logic. This is obviously sub-optimal as different browsers may either implement a minimal timeout that is too slow to prevent flicker or faster that uses a lot of CPU.

我非常希望做DOM的变化，然后强制布局，同步更新，并运行修复了逻辑立即在线。任何想法？

Ideally I would like to do the DOM changes, then force the layout to update synchronously and run the "fix-up" logic immediately inline. Any ideas?

推荐答案

我们遇到了一个疯狂的问题与IE8（火狐，Chrome是罚款）。我们的子元素上使用toggleClass（'enoMyAddressesHide'）

We encountered a crazy problem with IE8 (Firefox, Chrome are fine). We use toggleClass('enoMyAddressesHide') on child element.

.enoMyAddressesHide{display:none}

但父（S）的div容器不刷新/重新布局的高度。

But the parent(s) div container does not refresh/re-layout its height.

的setTimeout（），读出位置，读取宽度和元素的高度不帮。
最后，我们可以找到一个工作液：

setTimeout(), read position, read width and height of element do not help. Finally we can find out a working solution:

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
    });
});

看起来愚蠢的，但它的作品！

It looks stupid, but it works!

这篇关于我可以使用JavaScript来强制浏览器QUOT＆;＆冲洗QUOT;任何挂起的布局变化？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！