使用按钮

Question

嘿，总有一种方法可以连接MutationObserver，然后使用相同的按钮将其断开连接，我知道如何断开并连接它，但是我只想用一个按钮来完成该操作？对不起，我英语不好

var target = document.getElementsByClassName('message')[0];

var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    console.info("EVENT TRIGGERT ");
  });
});

var config = {
  attributes: true,
  childList: true,
  characterData: true
};

function dis() {
observer.disconnect();
}
function obs() {
observer.observe(target, config);
}

// simulate change
refreshIntervalId = setInterval(function() {
  document.getElementsByClassName('message')[0].innerHTML = Math.random().toString(36).substring(2, 15);
}, 1000);
//

<button onclick="obs();">observe</button>
<button onclick="dis();">disconnect</button>

<div class="message"></div>

Answer 1

在另一个变量（例如isObserving）中跟踪观察者状态。在true函数中将此变量设置为obs()，在false中将该变量设置为dis()并使用按钮调用toggleObs()。

function toggleObs() {
  if(isObserving) {
    dis();
  } else {
    obs();
  }
}

Answer 2

observable上没有任何属性，它可以告诉您是否进行观察。因此，您需要自己跟踪。参见示例https://stackblitz.com/edit/js-dw5jmr

let isObserving = false;
window.toggleObserve = function() {
  isObserving = !isObserving;
  isObserving ? window.obs() : window.dis();
}