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

时间:2021-02-22 12:07:02

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

我有一个脚本来监视由 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);

1 个答案:

答案 0 :(得分:1)

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

你会倾听变化,当事情发生变化时,你会产生另一个变化。

在您的更改侦听器中,您需要决定必须忽略您所做的更改。有几种方法可以做到这一点。在这种情况下,您可以检查它是否以 val imageView = view.findViewById(...) Glide .with(context) .load(imageURL) .addListener(object: RequestListener<Drawable> { override fun onLoadFailed(e: GlideException?, model: Any?, target: Target<Drawable>?, isFirstResource: Boolean) = false override fun onResourceReady(resource: Drawable?, model: Any?, target: Target<Drawable>?, dataSource: DataSource?, isFirstResource: Boolean): Boolean { resource?.let { val width = resource.intrinsicWidth val height = resource.intrinsicHeight //use these sizes whatever needed for imageView.setImageDrawable(resource) } return false } }) .preload() 结尾,这是否有意义取决于您的情况。

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

"TEXT"

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

相关问题