MutationObserver#
MutationObserver.disconnect()#
Metoda disconnect() usuwa (odłącza) danego obserwatora zmian ze wszystkich węzłów, które używały go do obserwacji oraz czyści jego kolejkę zapisu.
Opis działania#
Samo wywołanie i poszczególne jego części najlepiej objaśnić na zapisie składniowym:
mutationObserver.disconnect();gdzie poszczególne człony oznaczają:
- mutationObserver - obserwator zmian będący obiektem kontekstu, który będzie usuwany ze wszystkich używających go węzłów.
Algorytm wywołania metody disconnect() nie jest skomplikowany. Dla lepszego zrozumienia tematu prezentuję go w całości:
- Dla każdego (for each) węzła node w liście węzłów skojarzonej z obiektem kontekstu usuń każdego zarejestrowanego obserwatora na node, dla którego obiekt kontekstu jest obserwatorem, a także wyczyść kolejkę zapisu w obiekcie kontekstu.
Po odłączeniu danego obserwatora zmian metodą disconnect() jego funkcja zwrotna nie będzie wywoływana dopóty, dopóki obserwator zmian nie zostanie ponownie zarejestrowany na jakimś węźle za pomocą metody MutationObserver.observe().
Prosty przykład:
<script>
// Tworzymy nowego obserwatora 'newObserver'
var newObserver = new MutationObserver(function(records, observer){
// Cała funkcja zwrotna nie będzie wywoływana bo kolejka zapisu została wyczyszczona
// W czasie wywołania funkcji zwrotnej mamy dostęp do:
// records - lista ze wszystkimi obiektami MutationRecord
// observer - nasz newObserwer
alert("Witam wędrowcze");
});
// Tworzymy obiekt konfiguracyjny
var config = {
attributes: true
};
var new_P = document.createElement("P");
newObserver.observe(new_P, config); // rejestrujemy 'newObserver' na węźle 'new_P'
// 3x ustawiamy atrybut ID, co w konsekwencji doda do kolejki zapisu 3 nowe obiekty
new_P.id = "1";
new_P.id = "2";
new_P.id = "3";
newObserver.disconnect(); // wyłączamy obserwatora (z jednoczesny wyczyszczeniem kolejki zapisu)
document.write(newObserver.takeRecords().length); // 0 - kolejka wyczyszczona
</script>Trzeba uważać na polecenia umieszczane w funkcji zwrotnej danego obserwatora zmian. Jeśli instrukcje zwrotne będą wykonywały zmiany na węzłach, które brane są pod uwagę przy obserwacjach, to można doprowadzić do nieskończonego wykonywania kodu, w konsekwencji czego większość przeglądarek "ulegnie awarii". Metoda disconnect() potencjalnie pozwala zapobiegać tego typu sytuacjom.
Prosty przykład:
<script>
// Tworzymy nowego obserwatora 'newObserver'
var newObserver = new MutationObserver(function(records, observer){
// W czasie wywołania funkcji zwrotnej mamy dostęp do:
// records - lista ze wszystkimi obiektami MutationRecord
// observer - nasz newObserwer
document.documentElement.innerHTML += "<br><br>" + "Zarejestrowano zmiany węzła HTML"
+ "<br>" + "Liczba zmian records.length: " + records.length
+ "<br><br>" + "Interfejs pierwszej zmiany records[0]: " + records[0]
+ "<br>" + "Rodzaj pierwszej zmiany records[0].type: " + records[0].type
+ "<br>" + "Cel pierwszej zmiany records[0].target: " + records[0].target;
observer.disconnect(); // wyłączamy obserwatora (zabezpieczenie przed nieskończonym wywoływaniem)
});
// Tworzymy obiekt konfiguracyjny
var config = {
attributes: true,
childList: true,
characterData: true,
attributeFilter: ["id", "name"]
};
// Rejestrujemy 'newObserver' na konkretnym węźle (HTML),
// przekazując jednocześnie obiekt konfiguracyjny 'config'.
newObserver.observe(document.documentElement, config);
document.write(newObserver); // [object MutationObserver]
</script>Metoda disconnect() pojawia się dopiero w specyfikacji DOM4.
Składnia Web IDL#
interface MutationObserver { void disconnect(); }