CODEWITHSUNDEEP
javascripthtmldomdom-eventsmutation-observers
evgenyorlov1
evgenyorlov1

Reputation: 235

MutationObserver infinite callbacks caused by modifying element text

I have a script that watches DOM manipulation made by 3-rd party library script. I want to update element text property. However, in some cases when I try to append string to existing text (lets say elm.textContent += "text") i got infinite callback cycle.

I want to append text to elm.textContent any help with this will be appreciated !

const config = { childList: true, subtree: true };
const callback = function(mutationsList, observer) {
    for(const mutation of mutationsList) {
        console.log(mutation.);
        var elms = document.querySelectorAll(".FAxxKc");
        for(var elm of elms) {
            elm.textContent = elm.textContent + "TEXT"; // this causes infinite loop.
            // elm.textContent = "TEXT"; // works as expected.

        }
    }
};

const observer = new MutationObserver(callback);
// Start observing the target node for configured mutations
var div = document.getElementById("YPCqFe");
observer.observe(div, config);

Upvotes: 0

Views: 730

Answers (1)

Halcyon
Halcyon

Reputation: 57709

Well, of course this causes an infinite loop.

You listen for changes, and when something changes you generate another change.

In your change listener you need to decide that the change you made must be ignored. There are several ways to do that. In this case you could check if it ends in "TEXT", whether that makes sense or not depends on your situation.

You could also ignore the next time you enter the change listener after you made the change. ie:

let iMageChange = false;
callback = function(mutationsList, observer) {
    if (iMadeChange === true) {
        elm.textContent = elm.textContent + "TEXT";
        iMadeChange = true;
    }
    iMadeChange = false;
}

These solutions are far from ideal, the root cause is that you're doing this with mutation observers. Ideally the library just generates the correct text.

Upvotes: 1

Related Questions