Erneutes Verbinden und Trennen eines MutationObserver

8

Diese Frage ist die Fortsetzung von dieser . Es ist jedoch nicht notwendig, das vorherige zu lesen, ich gebe nur einen Link für interessierte Leser.

Es gibt einen Beobachter, der auf jedes Element mit irgendeiner Klasse reagiert, wie @Schomz vorgeschlagen hat:

%Vor%

Also, es gibt zwei eng miteinander verflochtene Fragen.

1) Aus irgendwelchen Gründen kann der Beobachter unterbrochen sein. Wie kann ich es wieder verbinden? Ich habe versucht, observer.observe zu verwenden, aber es funktioniert hier nicht.

2) Und die zweite Frage, wie kann man einen Beobachter manuell trennen? Ich habe versucht, observer.disconnect(); zu verwenden, aber es funktioniert auch nicht.

    
john c. j. 09.02.2016, 11:23
quelle

2 Antworten

2
  

1) Aus irgendwelchen Gründen kann der Beobachter unterbrochen sein. Wie kann ich es wieder verbinden? Ich habe versucht, observer.observe zu verwenden, aber es funktioniert hier nicht.

     

2) Und die zweite Frage, wie kann man einen Beobachter manuell trennen? Ich habe versucht, observer.disconnect (); zu verwenden, aber es funktioniert auch nicht.

Sie befinden sich auf dem richtigen Weg, aber Sie versuchen, die Variable observer außerhalb der Funktion, in der sie definiert ist, zu verwenden, also außerhalb ihres Bereichs, so dass sie nicht existiert (gibt undefiniert zurück).

Siehe mein aktuelles Beispiel für Ihren Originalcode. Ich habe die Beobachter in ein Array verschoben und außerhalb dieser Funktion zugänglich gemacht, sodass Sie sie normalerweise trennen und wieder verbinden können.

Das Problem bestand lediglich darin, Referenzen auf Beobachter zu halten, so wie Sie Referenzen zu den Zielelementen beibehalten haben.

%Vor% %Vor% %Vor%

AKTUALISIEREN

Wie erwähnt, wird der obige Ansatz in mein erstes Beispiel in der anderen (verknüpften) Frage eingefügt. Im Grunde nur eine externalisierte Funktion zum Erstellen von Beobachtern.

%Vor% %Vor% %Vor%
    
Shomz 13.02.2016, 01:28
quelle
4

Sie müssen tatsächlich nicht mehrere Instanzen verwenden, um mehr als ein DOM-Knotenelement zu beobachten.
Sie können einen Mutationsbeobachter verwenden, um mehrere DOM-Knotenelemente zu beobachten.
Um den Beobachter nach der Trennung erneut zu verbinden, müssen Sie keine neue Instanz des Mutationsbeobachters neu erstellen. Sie können einfach die Methode observe für die bereits erstellte Instanz erneut aufrufen, aber erst, nachdem sie getrennt wurde.

  

trennen ()

>      

Stoppt, dass die MutationObserver-Instanz Benachrichtigungen über DOM-Mutationen erhält. Bis die Methode observe() erneut verwendet wird, wird der Callback des Beobachters nicht aufgerufen.

Rufen Sie die Methode observe () auf an einem Element, das bereits beobachtet wird, hat keinen Einfluss auf die Beobachtung. Zumindest, wenn Sie für die Beobachtung die gleiche Beobachterinstanz verwenden.

  

HINWEIS: Das Hinzufügen eines Beobachters zu einem Element ist genau wie addEventListener. Wenn Sie das Element mehrmals beobachten, macht das keinen Unterschied. Das bedeutet, wenn Sie das Element zweimal beobachten, wird der Rückruf nicht doppelt ausgeführt, und Sie müssen disconnect () nicht zweimal ausführen. Mit anderen Worten, sobald ein Element beobachtet wird, wird das erneute Beobachten mit derselben Beobachterinstanz nichts tun. Wenn das Callback-Objekt jedoch anders ist, fügt es natürlich einen anderen Beobachter hinzu.

Hier ist ein Beispiel mit einer Beobachterinstanz, die das Breitenattribut einiger Bildelemente beobachtet. Im Beispiel wird ein Timeout verwendet, um einen zufälligen Wert für jedes Bildbreitenattribut festzulegen. Die Callback-Funktion gibt die Änderungen aus und trennt den Beobachter und startet dann den gesamten Prozess erneut.

%Vor% %Vor% %Vor%
    
DavidDomain 10.02.2016 10:17
quelle