Throttling & Debouncing

Throttling

짧은 시간 간격으로 연속해서 발생한 이벤트들을 일정시간 단위로 그룹화하여 처음 또는 마지막 이벤트 핸들러만 호출되도록 하는 것

주로 무한스크롤에서 사용

Debouncing

짧은 시간 간격으로 연속해서 이벤트가 발생하면 이벤트 핸들러를 호출하지 않다가 마지막 이벤트로부터 일정 시간이 경과한 후에 한 번만 호출하도록 하는 것

주로 입력값 실시간 검색, 화면 resize 이벤트 등에서 사용

---

setTimeout과 메모리 누수

메모리 누수 : 필요하지 않은 메모리를 계속 점유하고 있는 현상

하나의 페이지에서 페이지 이동 없이 setTimeout을 동작시키고 타이머 함수가 종료될 때까지 기다린다면 메모리 누수 X

리액트로 만든 SPA 웹사이트는 페이지 이동 시 컴포넌트가 언마운트 되는데, 페이지 이동 전에 setTimeout 으로 인해 타이머가 동작중인 상태에서 clearTimeout을 안해주고 페이지를 이동한다면, 컴포넌트는 언마운트 되었음에도 불구하고 타이머는 여전히 메모리를 차지하고 동작하기에 메모리 누수 O