Question

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

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

这是或者有更好的方法来解决这个问题吗？

赞赏的想法！

Answer 1

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

Underscore js提供了一个很好的debounce function，你可以使用它，如下所示：

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秒则不会触发。

这可能是simplest implementation from an old version of underscore和perf test comparing different implementations

Answer 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();

MutationObserver检测DOM'空闲'（结束或没有突变） - 何时进行AJAX调用？

2 个答案: