MutationObserver仅用于最后一次突变

时间:2017-11-22 12:17:18

标签: javascript mutation-observers

我使用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

有什么想法吗?

1 个答案:

答案 0 :(得分:2)

您可以通过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'] });