Monday, 24 August 2020

Stop MutationOberserver on click event

I have a dynamic DOM structure where nodes get inserted and deleted all the time, in order to react to new nodes I'm using a MutationObserver that gets activated when the user clicks on a Button. The MutationObserver will run two functions everytime the user clicks on that button and the functions will keep running when the DOM structure I'm observing change.

What I'm trying to do is to disconnnect the MutationObservers as soon as the user clicks the button again (Let's say click first time then sort elements, click again and stop sorting elements). I'm passing a boolean (goSortDom) everytime the user clicks the button (if true go do stuff and observe, if false stop observing). The thing is when I try to disconnect the observers when goSortDom=false they will never get disconnected and the functions will keep running.

I'm pretty new to mutationObservers so I don't know if my approach is a bad practice that's why I will really appreciate commnents on that too.

$(document).ready(function () {
  // Function 1: Assign Priorities
  function assignChatPriority(arrayParent) {
     //Assign Priorities
     //Observe if time change, if change re-assign priority to dom node
     timeInQueueDomObserver.observe(
     $(incomingChat).find(".time_cell")[0],
     configtimeInQueue
  }

  // Function 2: Reorder DOM
  function orderIncomingChats() {
    //Reorder DOM save DOM elements to Array
    //Replace original DOM with new sorted DOM 
  }

  //Declaring DOM Observers for Time in Queue and DOM container dynamics
  var incomingChatsDomObserver = new MutationObserver(function (mutations) {
    mutations.forEach(function (mutation) {
      if (mutation.addedNodes.length) {
        for (let i = 0; i < mutation.addedNodes.length; i++) {
          if (
            mutation.addedNodes[i].attributes["data-priority"] === undefined
          ) {
            runExtensionFunctions();
          }
        }
      }
    });
  });
  var timeInQueueDomObserver = new MutationObserver(function (mutations) {
    mutations.forEach(function (mutation) {
      if (
        mutation.addedNodes.length === 1 &&
        mutation.addedNodes[0].nodeType === Node.TEXT_NODE &&
        mutation.removedNodes.length === 1 &&
        mutation.removedNodes[0].nodeType === Node.TEXT_NODE
      ) {
        runExtensionFunctions();
      }
    });
  });

  //Obervers Configuration
  let configChatsContainer = {
    childList: true,
  };
  let configtimeInQueue = {
    childList: true,
  };
  if (goSortDom) {
    //boolean is true go ahead run functions and observe
    assignChatPriority(incomingChatsRows);
    orderIncomingChats();
    incomingChatsDomObserver.observe(
      incomingChatsContainer[0],
      configChatsContainer
    );
  } else {
    //disconnect observers: WON'T WORK
    incomingChatsDomObserver.disconnect();
    timeInQueueDomObserver.disconnect();
  }
}


from Stop MutationOberserver on click event

No comments:

Post a Comment