chrome ext:限制DOMNodeInserted

时间:2012-06-06 10:34:24

标签: javascript google-chrome-extension mutation-events

我正在开发一个chrome插件,它为页面中的每个元素注入一个类。但是在facebook或twitter这样的页面中有动态加载的内容,因此我使用此代码来检查加载此conent的时间:

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

感谢

2 个答案:

答案 0 :(得分:1)

我看过这种技术被称为 debouncing 。这是一个例子:

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

答案 1 :(得分:0)

我会说:

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。它将确保//do stuff最多执行。第一次DOMNodeInserted事件后1秒。