我可以使用 javascript 强制浏览器“刷新"吗?任何未决的布局更改? [英] 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) 等待布局更新并调用其余的逻辑.这显然是次优的，因为不同的浏览器可能会实现一个太慢而无法防止闪烁的最小超时，或者更快地使用大量 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 时遇到了一个疯狂的问题(Firefox、Chrome 都可以).我们在子元素上使用 toggleClass('enoMyAddressesHide').

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

.enoMyAddressesHide{display:none}

但是父 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 强制浏览器“刷新"吗?任何未决的布局更改?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！