关于JS中MutationObserver监听Dom树变化中的Callback函数一直调用的问题

今天做了一个水印防止消除的需求。我生成水印的方式是通过canvas中生成一张图片放在,body标签的背景图片。防消除用的就是MutationObserver去监听body标签中的属性是否变化,变化就重新生成水印。但是我在chrome浏览器测试取消背景图片这个样式的时候,会一直调用callback函数,这里就有点搞不明白了,希望大神能够解惑。
代码

<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <script type="text/javascript" src="js/jquery-1.4.4.min.js" ></script>
    <script src="js/jquery.waterMarker.js"></script>
    <script>

    var myDate = new Date();
    //获取当前年
    var year=myDate.getFullYear();
    //获取当前月
    var month=myDate.getMonth()+1;
    //获取当前日
    var date=myDate.getDate(); 
    var h=myDate.getHours();       //获取当前小时数(0-23)
    var m=myDate.getMinutes();     //获取当前分钟数(0-59)
    var s=myDate.getSeconds();  

    var now = year+"-" + month + "-" + date + " " + h + ":" + m + "";
    jQuery(function(){
        waterMaker("huangshuo",now);
        //此处callback函数会一直调用,影响浏览器性能
         var callback = function (records) {
          records.map(function (record) {
            console.log('Previous attribute value: ' + record.oldValue);
            var judge = record.oldValue + "";
            var b = "background";
             if(judge.match(b)){
                waterMaker("huangshuo",now);
                //mo.disconnect();
                //mo.observe(element[0], options);
             } 
          });
        };
        var mo = new MutationObserver(callback);


        //var element = document.getElementById('#my_element');
        var element = document.getElementsByTagName("body");
        //alert(element[0])
        var options = {
           'attributes': true,
           'attributeOldValue': true,
        }

        mo.observe(element[0], options);

    })
    </script>
    <body>
        <div class="waterMakertClass"></div>
    </body>
</html>

这里一直重复调用callback函数,控制台重复打印数据
图片说明

if(judge.match(b)){
waterMaker("huangshuo",now);
//mo.disconnect();
//mo.observe(element[0], options);
}
你死循环了,怎么可能不一直调用呢,
你设一次背景图,就触发一次监视,你监视里又去设背景图,有了改动,又被监视到了,你又去设背景图,又被监视到了,你又去设背景图,又被监视到了,你又去设背景图,又被监视到了,你又去设背景图,又被监视到了,你又去设背景图,又被监视到了,你又去设背景图,又被监视到了。
你需要个判断,而不是每次都是单纯的监视到有变化就直接重新设,你需要判断这次的变化是你自己js设,还是客户端直接改dom导致的,过滤掉你的重设动作.

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>

<body>
    <div class="waterMakertClass" ></div>
</body>
</html>

<script>
    //标记
    var isSelfChange = false;

    var myDate = new Date();
    //获取当前年
    var year=myDate.getFullYear();
    //获取当前月
    var month=myDate.getMonth()+1;
    //获取当前日
    var date=myDate.getDate();
    var h=myDate.getHours();       //获取当前小时数(0-23)
    var m=myDate.getMinutes();     //获取当前分钟数(0-59)
    var s=myDate.getSeconds();

    var now = year + "-" + month + "-" + date + " " + h + ":" + m + "";

    waterMaker("huangshuo", now);

    var mo = new MutationObserver(function (records) {
        console.log('callback');
        if (isSelfChange) {
            isSelfChange = false;
        } else {
            if (document.getElementsByTagName("body")[0].style.backgroundColor != 'antiquewhite') {
                isSelfChange = true;
                waterMaker("huangshuo", now);
            } 
        }        
    });
    mo.observe(document.getElementsByTagName("body")[0], {
        'attributes': true,
        'attributeOldValue': true,
    });

    function waterMaker(a, b) {       
        document.getElementsByTagName("body")[0].style.backgroundColor = 'antiquewhite';
    }
</script>