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

关于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 如何让企业微信机器人实现消息汇总整合
  • ¥50 关于#ui#的问题：做yolov8的ui界面出现的问题
  • ¥15 如何用Python爬取各高校教师公开的教育和工作经历
  • ¥15 TLE9879QXA40 电机驱动
  • ¥20 对于工程问题的非线性数学模型进行线性化
  • ¥15 Mirare PLUS 进行密钥认证？（详解）
  • ¥15 物体双站RCS和其组成阵列后的双站RCS关系验证
  • ¥20 想用ollama做一个自己的AI数据库
  • ¥15 关于qualoth编辑及缝合服装领子的问题解决方案探寻
  • ¥15 请问怎么才能复现这样的图呀