Простой пример наблюдателя мутации в JavaScript не работает

Question

Я пытаюсь добавить MutationObserver на моей веб-странице для получения изменений в IMG SRC, но это не работает.

Вот код, используемый:

setTimeout(function() {
  document.getElementById("img").src = "https://stackru.com/images/1f1575d9902983ce6121bf3b0d2103389ec27dd6.jpg"
}, 2000);

var target = document.querySelector('#img');

var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    console.log(mutation.type);
  });
});

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

observer.observe(target, config);
observer.disconnect();

<img src="https://stackru.com/images/3193236cdade9c8218c4d8f1d91d4885fb61ef1c.jpg" id="img" class="pic" height="100">

Answer 1

Если вы позвоните disconnect метод вы больше не будете получать уведомления:

Цитата из MDN

disconnect()

Останавливает экземпляр MutationObserver от получения уведомлений о мутациях DOM. До тех пор, пока метод наблюдений не будет использован снова, обратный вызов наблюдателя не будет вызываться.

setTimeout(function() {
  document.getElementById("img").src = "https://stackru.com/images/1f1575d9902983ce6121bf3b0d2103389ec27dd6.jpg"
}, 2000);

setTimeout(function() {
      document.getElementById("img").src = "http://i.imgur.com/Xw6htaT.jpg"
    }, 4000);

var target = document.querySelector('#img');

var observer = new MutationObserver(function(mutations) {
  
  mutations.forEach(function(mutation) {
    console.log(mutation.type);
  });
});

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

observer.observe(target, config);

// otherwise
observer.disconnect();
observer.observe(target, config);

<img src="https://stackru.com/images/3193236cdade9c8218c4d8f1d91d4885fb61ef1c.jpg" id="img" class="pic" height="100">