Javascript 如何"；暂停“；在变异观察者的回调中观察_Javascript_Asynchronous_Recursion_Callback_Mutation Observers

Javascript 如何"；暂停“；在变异观察者的回调中观察

javascript asynchronous recursion

Javascript 如何"；暂停“；在变异观察者的回调中观察,javascript,asynchronous,recursion,callback,mutation-observers,Javascript,Asynchronous,Recursion,Callback,Mutation Observers,例如，我想在.my code中编写一些代码 <head> <script class="my-codes"> var ob = new MutationObserver( function (mutations) { mutations.forEach( mutation => { mutation.addedNodes.forEach(

例如，我想在

.my code

中编写一些代码

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

实际结果（首次插入后观察完全停止）：

这似乎是使用全局变量的正确方法。但它们不需要全球化：

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();

事实上，我是尝试重新连接的人，我使用的是

setMutationHandler

from

https://greasyfork.org/scripts/12228/code/setMutationHandler.js

。我没有找到访问原始目标和配置的方法。是否可以在不修改原始的

setMutationHandler.js

的情况下重新连接

？
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();