setTimeout持续发射

Question

我有一个简单的扩展，它与页面的DOM一起工作（它寻找“东西”，看起来像登录表单）。问题在于，许多页面都有“动态”登录表单 - 它的代码在需要时被封装。这就是为什么body的onload事件不够。

所以我创建突变观察者和执行我的程序每次DOM变化（会有在未来的一些限制 - 许多这些变化不会影响我的目的）

因为有些间隔我要的执行我的程序在更新DOM的延迟执行（时间500仅用于测试目的）

var target = document.body; 
var timer; 

var observer = new MutationObserver(function(mutations) { 

    mutations.forEach(function(mutation) { 
    var count = mutation.addedNodes.length; 

    if(count > 0) { 

     timer = setTimeout(function(){ 

        console.log("executed"); 
        my_procedure(); 

       }, 500); 

    } 
    });  
}); 

var config = { attributes: true, childList: true, characterData: true }; 

observer.observe(target, config); 

的问题是，setTimeout的不断发射到无穷大，这使得网页一段时间后很懒惰。在Chrome JS控制台中，“执行”消息的数量仍在增加。

我知道clearTimeout(timer)，但我无法正确使用它 - 所以my_procedure只对每个DOM更改执行一次。

编辑：my_procedure实际上是第三方库函数，所以我不想（或可以）改变它 - 该函数启动整个表单分类逻辑。

谢谢你的建议。

Answer 1

在my_procedure的（），您可以使用

clearTimeout(timer); 

在第一线，以避免多重occurence

更新的代码：

var target = document.body; 
var timer; 
var counter = 0; 

var observer = new MutationObserver(function(mutations) { 

    mutations.forEach(function(mutation) { 
    var count = mutation.addedNodes.length; 
    clearTimeout(timer); 
    if(count > 0) { 
     if(counter == 0){ 
     counter = 1; 
     timer = setTimeout(function(){ 
        console.log("executed"); 
        my_procedure(); 

       }, 500); 
     }else { 
      clearTimeout(timer); 
     } 

    } 
    });  
}); 

var config = { attributes: true, childList: true, characterData: true }; 

observer.observe(target, config); 

Answer 2

你只拿到了1 VAR“计时器“然后你在你的”突变“上使用”.forEach（）“！

所以你每次覆盖定时器，这就是为什么如果你在my_procedure中设置clearTimeout，它不起作用（它只会停止1个定时器，最后一个突变）。

不是吗？

Answer 3

setTimeout似乎开火无穷的原因是，它实际上触发了多次，例如，添加到DOM的新元素。所以基本上，如果将3个div添加到DOM，它将分配3个setTimeout调用。原因是，你在mutations.forEach(function(mutation) { ... }循环内进行。

因此，该解决方案是去除循环和只分配上级一个setTimeout呼叫，这将触发时DOM的改变：

// create an observer instance 
var observer = new MutationObserver(function(mutations) { 

    // fired when a mutation occurs 
    timer = setTimeout(function() { 

     console.log("executed"); 
     // my_procedure(); 

    }, 500); 

}); 

下面是完整的例子，它应该显示“已执行”一次（3秒后）来控制何时DOM被实际更改，即使我们添加3个新的div。

js fiddle example

的代码：

// select the target node 
var target = document.body, 
    timer; 

// create an observer instance 
var observer = new MutationObserver(function(mutations) { 

    // fired when a mutation occurs 
    timer = setTimeout(function() { 

     console.log("executed"); 
     // my_procedure(); 

    }, 500); 

}); 

// configuration of the observer: 
var config = { attributes: true, childList: true, characterData: true }; 

// pass in the target node, as well as the observer options 
observer.observe(target, config); 

// Testing our observer 
setTimeout(function() { 
    document.body.innerHTML = "<div>lol 1</div>"; 
    document.body.innerHTML += "<div>lol 2</div>"; 
    document.body.innerHTML += "<div>lol 3</div>"; 
}, 3000); 

/* Comment out if you want to add more divs.. 
setTimeout(function() { 
    document.body.innerHTML += "<div>lol 4</div>"; 
    document.body.innerHTML += "<div>lol 5</div>"; 
    document.body.innerHTML += "<div>lol 6</div>"; 
}, 5000); 
*/ 

干杯。