MutationObserver 检测 DOM '空闲'（突变结束或无突变）——也就是什么时候进行 AJAX 调用？

Question

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

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

是这样还是有更好的处理方法？

想法赞赏！

Answer 1

您可以使用一个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 秒，它将不会触发。

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