MutationObserver nur für die letzte Mutation

Question

Ich verwende die MutationObserver, um Positionsänderungen in einem ziehbaren Objekt zu speichern.

Es sieht wie folgt aus:

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

Doch dieser Lauf für jedes Pixel geändert, so dass es viel rettende Operationen sein RAN ist. Ich möchte nur speichern, nachdem es für ungefähr 1 Sekunde aufhören mutiert hat, oder dass jeder Rückruf den vorherigen ausschließt. Ich habe schon so etwas mit RxJava gemacht, aber nicht mit MutationObserver gearbeitet.

Irgendwelche Ideen?

Answer 1

Sie könnten eine einfache Verzögerung von 1 Sekunde über setTimeout hinzufügen.

Auf diese Weise vorherigen Rückrufe werden verworfen und der Stil nur nach 1 Sekunde Inaktivität geändert wird:

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