크롬 내선 : DOMNodeInserted 제한

Question

페이지의 모든 요소에 클래스를 삽입하는 크롬 플러그인을 개발 중입니다. 그러나 그러한 또는 페이스 북과 같은 페이지에서 트위터가 동적으로로드 된 내용은, 그래서이 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); 

감사

내가 으로를 디 바운싱 언급이 기술을 본 적이

Answer 1

:

나는 이런 식으로 뭔가하지만 성공을 시도하고있다. 다음 예는 다음과 같습니다

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

Answer 2

내가 말하고 싶지만 :

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 이벤트.