Javascript chrome ext:限制域节点插入

我正在开发一个chrome插件，为页面中的每个元素注入一个类。但在facebook或twitter等页面中，会动态加载内容，因此我使用以下代码检查何时加载此内容：

document.addEventListener('DOMNodeInserted', function() {
    console.log('fatto');
}, true);

问题在于，通过这种方式，每次插入节点时都会触发脚本。因此，我想增加一些限制。类似于：插入节点时，启动脚本，然后等待2秒

我正在尝试这样的事情，但没有成功：

var check = 1;

document.addEventListener('DOMNodeInserted', function() {
    if(check == 1) {
        check = 0;
        setInterval( function() {

            //do stuff

            check = 1;

        }, 1000);

        console.log('fatto');
    }
}, true);

---

谢谢

我见过这种被称为去抖动的技术。下面是一个例子：

(function() {
    var timer;

    var doStuff = function() {
        timer = null;
        alert("Doing stuff");
    };

    document.addEventListener('DOMNodeInserted', function() {
        if (timer) {
            window.clearTimeout(timer);
        }
        timer = window.setTimeout(doStuff, 2000);
    }, false);
})();

你可以概括如下：

function addDebouncedEventListener(obj, eventType, listener, delay) {
    var timer;

    obj.addEventListener(eventType, function(evt) {
        if (timer) {
            window.clearTimeout(timer);
        }
        timer = window.setTimeout(function() {
            timer = null;
            listener.call(obj, evt);
        }, delay);
    }, false);
}

addDebouncedEventListener(document, 'DOMNodeInserted', function(evt) {
    alert(evt.target.nodeName + " inserted");
}, 2000);

我想说：

var timeout;

document.addEventListener('DOMNodeInserted', function() {
    startNewTimeout();
}, true);

function startNewTimeout() {
    //only if there is no active timeout already
    if(timeout === undefined) {
        timeout = setTimeout( function() {

           timeout = undefined;
           //do stuff

        }, 1000);
    }
}

---

​此脚本不会无限期地延迟执行

//do stuff

。它将确保在第一次

DOMNodeInserted

事件后执行

//do stuff

的时间最长为1秒。

如果我正确理解了您的代码，理论上这可能会无限期地延迟

doStuff

函数的执行（即每秒调用

DOMNodeInserted

事件）。@kdzwinel:是的。从这个问题上，我不确定这是否是要求。当像Facebook/Twitter这样的页面加载时，

doStuff（）

执行可能会出现严重延迟。当页面第一次打开时，许多元素被插入其中。但这只是一个假设，需要检验。非常好的代码顺便说一句！