MutationObserver 仅用于最后一个突变

Question

我正在使用 MutationObserver 来保存可拖动对象中的位置变化。

看起来像这样：

 let observer = new MutationObserver( (mutations) => {
        mutations.forEach( (mutation) => {
            this.builderData[element.id].$position.left = element.style.left;
            this.builderData[element.id].$position.top = element.style.top;
            this.saveBuilderData();
        });
    });
    observer.observe(element, { attributes : true, attributeFilter : ['style'] });

然而，这运行每个像素都发生了变化，因此运行节省了很多操作。我只想在它停止变异大约 1 秒后保存，或者每个回调都排除前一个回调。我已经用 RxJava 做了类似的事情，但没有用 MutationObserver。

有什么想法吗？

Answer 1

您可以通过 setTimeout 添加一个简单的 1 秒延迟。

这样会丢弃之前的回调，样式只会在闲置 1 秒后发生变化：

let timer;
let observer = new MutationObserver( (mutations) => {
  if (timer) clearTimeout(timer);
  timer = setTimeout(() => {
    mutations.forEach( (mutation) => {
        this.builderData[element.id].$position.left = element.style.left;
        this.builderData[element.id].$position.top = element.style.top;
        this.saveBuilderData();
    });
  }, 1000);
});
observer.observe(element, { attributes : true, attributeFilter : ['style'] });

MutationObserver 仅用于最后一个突变

MutationObserver for only the last mutation

javascript

mutation-observers