今天做了一個水印防止消除的需求。我生成水印的方式是通過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函數，控制檯重複打印數據
