L'esempio semplice dell'osservatore di mutazione in JavaScript non funziona

Question

Nella mia pagina Web provo ad aggiungere uno MutationObserver per ottenere modifiche in img src, ma ciò non funziona.

Ecco il codice utilizzato:

setTimeout(function() { 
 
    document.getElementById("img").src = "http://i.stack.imgur.com/aQsv7.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="http://i.stack.imgur.com/k7HT5.jpg" id="img" class="pic" height="100">

Answer 1

Se si chiama il metodo disconnect non riceverai più notifiche:

Quote from MDN

disconnect() 

Arresta l'istanza MutationObserver dalla ricezione di notifiche delle mutazioni DOM . Fino a quando non viene utilizzato nuovamente il metodo observ(), la richiamata dell'ora dell'osservatore non verrà richiamata.

setTimeout(function() { 
 
    document.getElementById("img").src = "http://i.stack.imgur.com/aQsv7.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: false, 
 
    characterData: false 
 
}; 
 

 
observer.observe(target, config); 
 

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

<img src="http://i.stack.imgur.com/k7HT5.jpg" id="img" class="pic" height="100">