MutationObserver-Schleife stoppt vor dem letzten Element

[Rolf B]

Hallo KKK,

sorry, dieser Code ist so verquast, da finde ich mich überhaupt nicht mehr zurecht. Du verwendest eine Menge moderner Syntax-Elemente, wie Pfeilfunktionen und spread-Operatoren, aber bist auch sehr umständlich.

[...holder.children].forEach(el => { LosGehts(el); });

// einfacher:
[...holder.children].forEach(LosGehts);

oder

let config = {};
config["attributes"] = true;

// einfacher:
let config = { attributes: true };

oder

let callback = () => {
		naechsterSchritt.call(null, ObserverVar);
	};

// einfacher:
const callback = () => naechsterSchritt(ObserverVar);

// noch einfacher: direkt naechsterSchritt als Callback setzen, 
// denn ObserverVar ist ohnehin global.

Ich bin auch nicht sicher, dass in diesem Callback-Gestrüpp die Ausführungsreihenfolge so ist, wie Du Dir das vorstellst, inbesondere durch Verwendung der globalen Variablen ObjektZaehler. Und ich kapiere auch nicht, warum Du ObjektZaehler und El_Warteschleife verwendest; das ist doch beides ein Index für die gespeicherten Observer. Vermutlich bist Du da irgendwo um 1 daneben, das könnte man durch Loggen herausbekommen.

Aber ich halte das für Zeitvergeudung. Dein Code ist viel zu komplex. Du möchtest doch

• dass für jedes der 5 Bilder ein MutationObserver installiert wird
• dieser MutationObserver bei Ändern irgendeines Attributs aktiv wird und irgendwas tut (das irgendwas hast Du uns aber nicht gezeigt, ok)
• und sich der Observer danach disconnected.

Das geht viel eleganter. Du rufst ja für jedes Bild die LosGehts Funktion auf. Diese erzeugt den Observer und enthält den Callback. Den Callback klebst Du an den Observer, und der Observer klebt sich dann ans Bild.

Wichtig: Am Callback klebt der Aufrufkontext der LosGehts Funktion, in der dieser Observer erzeugt wurde. Und damit auch das Observer-Objekt, wenn Du es dort in einer lokalen Variablen speicherst. Und damit könntest Du dann hantieren. Eine globale Registry ist überhaupt nicht nötig.

Das zeige ich aber gar nicht erst, denn es geht hier noch einfacher. Der Callback bekommt vom Observer zwei Parameter: den MutationRecord, und den Observer selbst. Und Bob ist dein Onkel.

const observe = elem => {
   // Zeilenumbrüche für bessere Lesbarkeit im Forum
   new MutationObserver( (record, obs) => {
         // tu was mit dem MutationRecord
         // ...
         // und klemme den Observer wieder ab
         obs.disconnect();
   })
   .observe(
      elem,
      { attributes: true }
   );
};

[...document.getElementById("holder").children].forEach(elem => {
   observe(elem);
   elem.style["top"] = "12px";
});

Dieser Code ist jetzt ungetestet, aber ich würde behaupten, er passt zu dem, was Du eigentlich willst. Die observe-Funktion könnte man auch noch inline in den foreach kleben, aber eigentlich ist das JavaScript und nicht APL (die Sprache, für die man eine eigene Tastatur braucht und in der man einzeilige Programme beliebiger Komplexität schreiben kann).

Gruß auch an Bastian Balthasar Bux
Rolf