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

【问题标题】：MutationObserver infinite callbacks caused by modifying element text修改元素文本导致的 MutationObserver 无限回调
【发布时间】：2021-02-22 12:07:02
【问题描述】：

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

我想将文本附加到 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);

【问题讨论】：

你检查了吗stackoverflow.com/a/50916724/4826457
这能回答你的问题吗？ mutation observer production infinite loop
@SurajRao 谢谢，我做到了，但我需要更具体的东西

标签： javascript html dom dom-events mutation-observers

【解决方案1】：

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

你倾听变化，当某件事发生变化时，你会产生另一个变化。

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

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

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

这些解决方案远非理想，根本原因是您正在使用突变观察者进行此操作。理想情况下，该库只生成正确的文本。

【讨论】：