如何等待浏览器完成javascript中的重排？

Posted 2023-02-22

【中文标题】如何等待浏览器完成javascript中的重排？

【英文标题】：How to wait for the browser to finishing reflow in javascript?

【发布时间】：2016-12-23 06:41:15

【问题描述】：

在 javascript 中我定义了这个窗口大小调整事件

    $(window).resize(function() 

    )

但是在里面，我需要获取元素的宽度。问题是，我得到的尺寸是针对它在回流之前的状态，当我需要在回流之后获得尺寸时。

我尝试设置 1 毫秒的超时时间，但它似乎不起作用。如果我做 100 毫秒，那么它会做。但是我没有链接这个方法，有没有更好的方法？

EDIT：该函数被调用一次，但它只是需要等到重绘之后。

谢谢

【问题讨论】：

jQuery - how to wait for the 'end' of 'resize' event and only then perform an action?的可能重复

这并不是说我在调整大小时会触发多个事件（即它只被调用一次），但我只需要等到浏览器重绘之后。

resize 事件在文档调整大小后触发，但显然在所有重绘完成之前触发。也许可以使用 RequestAnimationFrame 来确定浏览器是否（几乎）完成。见developer.mozilla.org/en-US/docs/Web/Events/resize 和developer.mozilla.org/en-US/docs/Web/API/window/…

【参考方案1】：

你应该像这样使用document.ready：

$(document).ready(function()
  $(window).resize(function() 
    ///Your code
  );
);

【讨论】：

我做到了，但这不是我的意思。重绘发生在每次调整大小时。所以内部调整大小，我需要以某种方式等待重绘完成。