MutationObserver for only the last mutation

Question

I'm using the MutationObserver to save position changes in a draggable object.

It looks like this:

 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'] });

However, this run for every pixel changed, so it is a lot saving operations being ran. I would like to only save after it has stop mutating for about 1 second, or that each callback excludes the previous one. I already did something like this with RxJava, but did not worked with MutationObserver.

Any ideas?

You can use debounce to reduce amount of stored information

Flying
– Flying

2017-11-22 12:27:10 +00:00
Commented Nov 22, 2017 at 12:27 — Flying
– Flying, Commented Nov 22, 2017 at 12:27
I wish to see a better answer here.

user5858
– user5858

2018-06-23 06:05:27 +00:00
Commented Jun 23, 2018 at 6:05 — user5858
– user5858, Commented Jun 23, 2018 at 6:05

Maluen · Accepted Answer · 2017-11-22 12:22:00Z

You could add a simple 1 second delay via setTimeout.

This way previous callbacks are discarded and the style is only changed after 1 second of inactivity:

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'] });

It worked great, dude! I tried using timeout, but I didn't knew about this clearTimeout method =(. Cheers man!

Collectives™ on Stack Overflow

MutationObserver for only the last mutation

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related