MutationObserver-Schleife stoppt vor dem letzten Element

[Rolf B]

Hallo Karl,

okay, deine Null-Ausgabe hatte ich für reinen Debug gehalten. Ich habe übrigens mal Logs in Deinen eigenen Code eingebaut, der Fehler ist, dass Du in naechsterSchritt immer den Observer Nr. 4 disconnectest und darum die Attributänderung für das letzte Bild nicht mehr mitbekommst. Globale Variablen funktionieren hier nicht gut.

Statt meinen Code einfach zurückzuweisen, könntest Du ihn auch nutzen. Man muss nur ein bisschen hinzufügen.

let openObservations = 0;

const handleComplete = () => {
   console.log("Alle Bilder positioniert");
};

const observe = elem => {
   openObservations++;
   new MutationObserver( (record, obs) => {
         obs.disconnect();
         if (--openObservations == 0)
            handleComplete();
   })
   .observe(elem, { attributes: true });
};

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

Das ist aber immer noch ein globaler Zähler und eigentlich unschön. Wir können auch Promises an den Start bringen. Je Bild ein Promise, der Observer resolved das Promise, und über Promise.all führen wir es zusammen. Ich würde dann nur erst alle Observer erzeugen und das Promise scharf schalten, bevor ich die Bilder repositioniere.

const observePromise = bild => {
   return new Promise( (resolve, reject) => {
      new MutationObserver( (rec, obs) => {
         obs.disconnect();
         resolve(bild);
      })
      .observe(bild, { attributes: true });
   });
};

const bilder = [...document.getElementById("holder").children];
const observations = bilder.map( bild => observePromise(bild));

Promise.all(observations)
.then( results => {
   console.log("Alle Bilder sind positioniert");
});

bilder.forEach(bild => {
   bild.style = "margin-top: 100px";
});

Rolf