2

我们目前正在成功检测页面中目标 DOM 元素的突变。我们现在正在研究将这些目标节点突变的某些属性聚合到一个“列表”中，以通过 AJAX 调用发送以在服务器上进行处理。来自服务器的回调将允许我们修改这些目标元素的属性。

但是，问题在于何时进行第一次 Ajax 调用。显然我们知道突变何时开始（因此添加到列表中）。但是，我们永远不知道它们何时结束（MutationObserver 空闲）然后进行 AJAX 调用。当然，我们可以编写一个函数来检查列表的大小以及经过的一段时间，以便在函数唤醒时进行包含聚合列表内容的 Ajax 调用。

这是它还是有更好的方法来处理这个？

想法赞赏！

4

2 回答 2

6

您可以使用debounce函数，以便仅在一段时间后调用该函数p

Underscore js 提供了一个很好的去抖动功能，你可以使用如下：

var observer = new MutationObserver(_.debounce(function() {
    //make ajax calls and stuff
}, 1000));//the ajax function wont be called until 1000 ms have passed

observer.observe(document, {childList:true});

因此，这将阻止您的 ajax 调用，直到自上次突变以来经过 1 秒，并且如果自上次突变以来没有 1 秒，它将不会触发。

这可能是旧版本下划线和比较不同实现的性能测试中最简单的实现

于 2013-12-27T20:59:06.627 回答
2

我做这样的事情：

let updatesOccur = true;
const observer = new MutationObserver((mutations) => {
  updatesOccur = true;
});
observer.observe(window.document, {attributes: true, childList: true, characterData: true, subtree: true});
let mutationsCompletedCallback = () =>
{
  if (updatesOccur) {
    updatesOccur = false;
    setTimeout(mutationsCompletedCallback, 250);
  } else {
    observer.takeRecords();
    observer.disconnect();
    console.log('NO MORE MUTATIONS!');
  }
};
mutationsCompletedCallback();
于 2018-06-11T17:32:51.213 回答