JavaScript 쓰로틀링(Throttling), 디바운싱(Debouncing)

회사 프로젝트 진행 중 브라우저 resize, scroll 이벤트에 따라 함수를 호출할 일이 생겼는데 비효율적으로 이벤트가 발생할 때 마다 콜백 함수를 호출하는 것을 발견하였다.

두 이벤트 같은 경우에는 연속해서 일어날 확률이 높은 이벤트들인 만큼 연결된 콜백 함수가 있다면 빈번한 콜백 함수 호출이 일어날 것이고 이는 성능 저하의 원인이 될 수도 있다.

이러한 문제를 해결할 수 있는 방법에 대해서 조사해 보았고 쓰로틀링(Throttling)과 디바운싱(Debouncing)이라는 개념을 알게 되었다.

 

• 쓰로틀링(Throttling): 처음 이벤트 실행 후 설정한 시간 동안 발생한 이벤트는 묶어서 한번의 콜백 함수 호출만 이루어지게 하는 개념. resize, scroll 등의 이벤트에 사용하기 적합하다.
• 디바운싱(Debouncing): 마지막 이벤트가 실행된 후 설정한 시간 동안 동일한 이벤트가 발생하지 않는다면 콜백 함수 호출이 이루어지는 개념. 설정한 시간 안에 이벤트가 계속 발생한다면 콜백 함수 호출은 무기한 기다리게 됨. API 통신(버튼 클릭, 타이핑 시 검색 결과 호출)을 사용하는 이벤트에 사용하기 적합하다.