如何在觀察MutationObserver的回調中「暫停」

例如，我想在.my-codes中編寫一些代碼。如何在觀察MutationObserver的回調中「暫停」

<head> 
<script class="my-codes"> 
    var ob = new MutationObserver(
     function (mutations) { 
      mutations.forEach(
       mutation => { 
        mutation.addedNodes.forEach(
         node => { 
          if(node.nodeName === "DIV"){ 
           // Without this browser may crush for infinite recursion 
           this.disconnect(); 
           let innerNode = document.createElement("div"); 
           innerNode.className = "inner-div"; 
           console.log("Insert div to a ." + node.className); 
           node.appendChild(innerNode); 
           // Method below does not exist 
           /* this.reconnect(); */ 
          } 
         } 
        ) 
       } 
      ); 
     } 
    ); 
    ob.observe(document, {childList:true, subtree:true}); 
</script> 
</head> 
<body> 
    <div class="div1"> 
     <script> 
      let asyncDiv = document.createElement("div"); 
      asyncDiv.className = "div3"; 
      setTimeout(()=>document.body.appendChild(asyncDiv), 10); 
     </script> 
    </div> 
    <div class="div2"></div> 
</body>

預期結果（如果像this.reconnect();存在）：

<div class="div1"> 
    <div class="inner-div"></div> 
</div> 
<div class="div2"> 
    <div class="inner-div"></div> 
</div> 
<div class="div3"> 
    <div class="inner-div"></div> 
</div>

實際結果（觀察第一個插入後完全停止）：

<div class="div1"> 
    <div class="inner-div"></div> 
</div> 
<div class="div2"></div> 
<div class="div3"></div>

有沒有一種可靠的方法執行this.reconnect();函數？

（這將是最好不要亂用全局變量，代碼如下不被認爲是可靠的方法，因爲回調函數需要捕獲全局變量）

var target = document; 
var config = {childList:true, subtree:true}; 
var ob = new MutationObserver(
    function(mut, observer){ 
     this.disconnect(); 
     /* mess with DOM */ 
     observer.observe(target, config); 
    } 
) 
ob.observe(target, config);

來源

2017-06-12 Byzod

看來樣用正確的方式全局變量。但是，他們不需要是全球性的：

function observe(target,config){ 
    target =target|| document; 
    config = config||{childList:true, subtree:true}; 
    var ob = new MutationObserver(function(mut, observer){ 
     ob.disconnect(); 
    /* mess with DOM */ 
     ob.observe(target, config); 
    }); 
ob.observe(target, config); 
} 

observe();

這可以擴展到提供觀察的一個更一般的方式：

function customObserver(target,config,callback){ 
this.target =target|| document; 
this.config = config||{childList:true, subtree:true}; 
var that=this; 
this.ob = new MutationObserver(function(mut,observer){ 
    callback.call(that,mut,observer); 
}); 
} 

customObserver.prototype={ 
    connect:function(){ 
    this.ob.observe(this.target,this.config); 
    }, 
disconnect:function(){ this.ob.disconnect()} 
};

所以可以這樣做：

var observer=new customObserver(document,false,function(observer,mutations){ 
    observer.disconnect(); 
    //som DOM changes 
observer.connect(); 
}); 
observer.connect();

來源

2017-06-12 15:43:28

其實我m是試圖「重新連接」的那個，我使用'https：// greasyfork.org/scripts/12228/code/setMutationHandler.js'中的'setMutationHandler'。我沒有找到訪問原始目標和配置的方法。是否可以在不修改原始'setMutationHandler.js'的情況下重新連接？ – Byzod

如何在觀察MutationObserver的回調中「暫停」

回答

相關問題