javascript - 检测浏览器 DOM 更改完成

Question

我有一段 JavaScript 代码，可以将新的 XHTML 添加到现有页面(DOM 树)中。我的页面元素是动态的，因此添加新元素会导致其他元素大小发生变化。我有一个自定义滚动条实现，它取决于这些大小，并且每次更改时都需要重置。

在插入新 XHTML 的语句后不久，我调用了重置方法。但这似乎还为时过早。有时滚动条无法正确调整。如果我在重置之前添加一些延迟，这是可以的，但我认为它太粗糙且不可靠的解决方案。

我需要:

检测给定 DOM 元素何时完成大小更改

或

检测整个 DOM 更改何时完成以及重新布局。

到目前为止我什么也没找到。我知道对于大多数人来说情况太复杂，但我希望有人能够提供帮助。谢谢!

Answer 1

进行一些轮询来检查 dom 的状态怎么样？这是使用 jQuery 的，只要页面主体中的 html 更新(最大延迟半秒)，就会调用 resetMyScrollbar。

var lastDom = "";
function checkDomHash() {
  var newDom = $("body").html();
  if (newDom != lastDom) {
    resetMyScrollbar();
  }
  window.setTimeout(checkDomHash, 500);
}

在现实生活中，我会使用哈希函数并比较哈希值，因为比较巨大的字符串是浪费的。

var lastDomHash = "";
...
  var newDomHash = md5OrWhatever($("body").html());
  ...

编辑

或者您可以检查滚动条的高度。

var lastHeight = 0;
...
  var newHeight = $("#my_element_id").outerHeight();
  ...