debounce MutationObserver

debounceMutationObserver.js

const debounce = (func, delay) => {
  let debounceTimer;
  return function() {
    const context = this;
    const args = arguments;
    clearTimeout(debounceTimer);
    debounceTimer = setTimeout(() => func.apply(context, args), delay);
  };
};
let summery = { addded: [], removed: [] };

const send = debounce(() => console.log(`sending to server mutations:  ${JSON.stringify({added: summery.addded, removed: summery.removed})}`),3000);

const log = mutations => {
  
  for (let mutation of mutations) {
    for (let node of mutation.addedNodes) {
      // we track only elements, skip other nodes (e.g. text nodes)
      if (!(node instanceof HTMLElement)) continue;
      //console.log(node);
      summery = {
        ...summery,
        addded: [...summery.addded, node.outerHTML]
      };
    }
    for (let node of mutation.removedNodes) {
      // we track only elements, skip other nodes (e.g. text nodes)
      if (!(node instanceof HTMLElement)) continue;
      summery = {
        ...summery,
        removed: [...summery.removed, node.outerHTML]
      };
    }
  }
  send();
};

let observer = new MutationObserver(log);
observer.observe(document.body, { childList: true, subtree: true });