蜡笔小七 2019-01-11 16:37 采纳率: 0%
浏览 901
已结题

关于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函数，控制台重复打印数据
图片说明

  • 写回答

1条回答

  • 程序员的键盘 2019-01-11 18:29
    关注

    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>
    评论

报告相同问题？

悬赏问题

  • ¥15 Arduino红外遥控代码有问题
  • ¥15 数值计算离散正交多项式
  • ¥30 数值计算均差系数编程
  • ¥15 redis-full-check比较 两个集群的数据出错
  • ¥15 Matlab编程问题
  • ¥15 训练的多模态特征融合模型准确度很低怎么办
  • ¥15 kylin启动报错log4j类冲突
  • ¥15 超声波模块测距控制点灯，灯的闪烁很不稳定，经过调试发现测的距离偏大
  • ¥15 import arcpy出现importing _arcgisscripting 找不到相关程序
  • ¥15 onvif+openssl，vs2022编译openssl64