变异观察者发出 n 次变化，这使我的其他功能变慢。有什么方法可以等待每次更改迭代然后继续？

Question

我有 1 个用作指令的变异观察器，

Mutation.ts:

const element = this.elementRef.nativeElement;

        this.changes = new MutationObserver((mutations: MutationRecord[]) => {
            mutations.forEach((mutation: MutationRecord) => this.domChange.emit(mutation));
        }
        );

        this.changes.observe(element, {
            childList: true,
            subtree: true
        });

组件HTML:

<child-component (mutation)="mutate($event)"></child-component>

组件 TS：

mutate(event) {
if(searchKey) {
const elements = this.elem.nativeElement.querySelectorAll(`.${'highlight'}`);
      const instance = new Mark(elements);
      instance.mark(searchKey, options);
}
}

这个子组件加载了将近 500 条记录，dom 更改发出了太多次，以至于我的 mutate(event) 函数无法一次处理所有。需要了解是否有一种方法可以在不冻结我的应用程序的情况下为每个请求突出显示

Answer 1

退房：

 const queue = [];
    const mo = new MutationObserver(mutations => {
      if (!queue.length) requestAnimationFrame(process);
      queue.push(mutations);
    });
    function process() {
      for (const mutations of queue) {
        // ..........
      }
      queue.length = 0;
    }

这段代码运行良好。 post 中给出了很好的答案。谢谢。

变异观察者发出 n 次变化，这使我的其他功能变慢。有什么方法可以等待每次更改迭代然后继续？

Mutation observer emits n number of changes, which makes my other functions slow. Any ways to wait for each iteration of change and then to proceed?

html

mutation-observers

typescript

angular