chrome ext：限制DOMNodeInserted

我正在開發一個chrome插件，它向頁面中的每個元素注入一個類。但是，在諸如Facebook或頁面嘰嘰喳喳存在動態加載的內容，所以我用這個代碼來檢查時，該conent加載：chrome ext：限制DOMNodeInserted

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

感謝

來源

2012-06-06 lorussian

我見過被稱爲防抖動這種技術。這裏有一個例子：

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

來源

2012-06-06 11:13:44

如果我正確理解你的代碼，這可能會無限期地延遲執行'doStuff'函數（即每秒調用DOMNodeInserted事件時）。 –

@kdzwinel：是的。我不確定這是否是要求。 –

當像Facebook/Twitter這樣的頁面正在加載時，OP可能會在'doStuff（）'執行中令人討厭的延遲。首次打開頁面時，會在其中插入很多元素。但這只是一個假設，需要進行測試。很好的代碼順便說一句！ –

我會說：

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最大執行。 1秒後首先發生DOMNodeInserted事件。

來源

2012-06-06 11:25:15

chrome ext：限制DOMNodeInserted

回答

相關問題