单击事件停止MutationOberserver

问题描述

我有一个动态的DOM结构，其中的节点一直都在插入和删除，为了对新节点做出反应，我使用的是MutationObserver，当用户单击Button时它会被激活。每当用户单击该按钮时，MutationObserver将运行两个函数，并且当我观察到的DOM结构发生更改时，这些函数将继续运行。

我要做的是一旦用户再次单击按钮就断开MutationObservers（假设是第一次单击，然后对元素进行排序，再次单击并停止对元素进行排序）。每当用户单击按钮时，我都会传递一个布尔值（goSortDom）（如果为true，则执行操作并观察，如果为false，则停止观察）。问题是当goSortDom = false时我尝试断开观察者的连接时，它们将永远不会断开连接，并且功能将继续运行。

我对mutationObservers来说还很陌生，所以我不知道我的做法是否是一种不好的做法，这就是为什么我也将非常欣赏这些建议的原因。

$(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();
  }
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）