마지막 돌연변이 전용 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'] });