javascript - setTimeout 不断触发

Question

我有一个简单的 chrome 扩展，它与页面的 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实际上是第3方库函数，所以我不想(或可以)更改它 - 该函数启动整个表单分类逻辑。

感谢您的建议。

Answer 1

在 my_procedure() 中你可以使用

clearTimeout(timer); 

放在第一行以避免多次出现

更新代码:

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