사용자가 스크롤 할 때 DOM을 계속 수정합니다.

Question

키워드를 기반으로 DOM을 수정하는 Chrome 확장 프로그램이 있습니다. 문제는 트위터와 같이 스크롤이 무한한 웹 사이트의 경우 사용자가 페이지를 스크롤하면서 내 기능을 계속 실행하는 방법이 필요하다는 것입니다.

.livequery()은 유일한 방법이며 더 좋은 방법이 있습니까?

지금 당장은 모든 로직이 일반 JavaScript/Jquery입니다.하지만 Angular와 같은 프레임 워크를 사용하는 것이 가장 좋습니다.

I have several functions that interact - 
1) a hide() function that adds a class to divs containing words I want hidden 
2) a walk() function that walks the DOM and identifies divs to call hide() on 
3) walkWithFilter() function that gets words to filter from localstorage and calls walk() function 

마지막 기능 walkWithFilter()은 onScroll 이벤트가 이것에 대한 자연적인 경기가 될 것처럼 그것은 보인다 window.onload() 이벤트

Answer 1

에 호출된다. 트릭은 이전 내용을 재 처리하지 않기 위해 이미 처리 된 내용을 추적해야 할 것입니다. 사용자가 항상 기존 콘텐츠 아래에 새 콘텐츠를 노출한다고 가정하는 경우 마지막 처리 된 항목에 대한 포인터를 유지하고 거기에서 walkWithFilter 메서드를 다시 시작하는 것처럼 간단 할 수 있습니다. 그것은 나에게 전적으로 안전한 가정처럼 보이지 않습니다.

당신이 좀더 견고 해 지길 원한다면, 가상 DOM 접근법을 시도해 볼 수 있습니다 : DOM의 복사본을 마지막으로 본 것처럼 유지하고 현재 존재하는 DOM과 비교하고 diff를 취합니다 . 나는 이런 종류의 것을 위해 premade libraries의 무리가 있다는 것을 알고 있지만, 나는 어떤 것도 사용하지 않았고 특정 하나를 추천 할 수 없다. (링크는 구글에 나타난 첫 번째 예제로 간다.) 그것은 또한 당신이 그렇게 기울이면 roll your own에 지나치게 부담이되는 것처럼 보이지 않습니다.