Javascript 如果我使用setAttribute，MutationObserver将挂起

我有一个观察者，它会监听

listitem

div属性的任何更改，如果attibutes更改，它会将该div的背景色设置为红色

事实上，你可以很容易地自己测试它。打开Chrome的书签管理器，在控制台中启动此脚本，然后单击任意书签或文件夹。它将被涂成红色

这个问题在代码块的中间被提及：如果我使用<代码> StestAtgs<代码>，脚本将被挂起。

第一种方法（使用

style.attributeName

）不适合我，因为在我的实际代码中，我使用的是自定义属性，而不是

背景色

这个问题看起来很奇怪。怎么解决呢

<div role="listitem"></div>
<div role="listitem"></div>
<div role="listitem"></div>

<script>
var target = document.querySelectorAll("[role='listitem']");
for (var i = 0; i < target.length; i++) {

    // create an observer instance
    var observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {


            // The Problem
            // ===========

            // This work well
            mutation.target.style.backgroundColor = "red";

            // But this doesn't
            // mutation.target.setAttribute("style", "background-color: red;");

        });
    });

    // configuration of the observer
    var config = { attributes: true };

    // pass in the target node, as well as the observer options
    observer.observe(target[i], config);
}
</script>


var target=document.queryselectoral（“[role='listitem']”）；
对于（变量i=0；i
您通过更改属性来响应每个属性更改。毫不奇怪，这会导致一个问题：你会让观察者再次开火。显然，
setAttribute
会更新属性对象，即使您设置了相同的值（我认为这不是不合理的，尽管有点令人惊讶）

相反，我只会在实际需要更改时设置它：

if (mutation.target.getAttribute("yourattr") != targetvalue) {
    mutation.target.setAttribute("yourattr", targetvalue);
}

我已经检查了将属性设置为相同的值是否会再次触发观察者（无论如何，在Chrome上）：


var target=document.getElementById（“目标”）；
var计数器=0；
var observer=新的MutationObserver（函数（）{
++计数器；
log（Date.now（）+“：”+计数器）；
如果（计数器<10）{
log（“内部处理程序：将数据foo设置为bar”）；
setAttribute（“数据foo”、“bar”）；
}否则{
log（“内部处理程序：已停止，以避免永远循环”）；
}
});
observer.observe（目标，{attributes:true}）；
log（“初始更改：将数据设置为其他内容以进行测试”）；
setAttribute（“其他数据”、“测试”）