修改元素文本导致的 MutationObserver 无限回调

Question

我有一个脚本可以监视 DOM 由第 3 方库脚本进行的操作。我想更新元素文本属性。但是，在某些情况下，当我尝试将字符串附加到现有文本时（比如说 elm.textContent +=“文本”），我得到了无限的回调周期。

我想将文本附加到 elm.textContent 任何帮助将不胜感激！

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);

Answer 1

嗯，当然这会导致无限循环。

你监听变化，当发生变化时你会产生另一个变化。

在您的更改侦听器中，您需要决定必须忽略您所做的更改。有几种方法可以做到这一点。在这种情况下，您可以检查它是否以 "TEXT" 结尾，这是否有意义取决于您的情况。

您也可以忽略下一次您在进行更改后进入更改侦听器。即：

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

这些解决方案远非理想，根本原因是你正在与变异观察者一起做这件事。理想情况下，库只会生成正确的文本。

修改元素文本导致的 MutationObserver 无限回调

MutationObserver infinite callbacks caused by modifying element text

html

javascript

dom

dom-events

mutation-observers