[Throttle, Debounce & Difference]

웹/앱 사용자가 스크롤(scroll wheel), 트랙패드, 스크롤 막대를 드래깅 해을때, 이 행위로 인해 수많은 스크롤 이벤트가 발생한다.

 

See the Pen Scroll events counter by jaeheekim (@jaehee) on CodePen.

 

과도한 이벤트 횟수의 실행으로 무거운 계산 및 기타 DOM 조작과 같은 작업을 수없이 많이 수행하기때문에

성능 문제가 발생한다.

 

이를 막기 위해 등장한 방법이  Throttle, Debounce 이다.

 

이벤트 핸들러가 많은 연산 을 수행 할 때 (이벤트 핸들러의 과도한 횟수가 발생하는 것)하는 것을 제어할 수 있는 기술이다.

사용 사례

👆 사용자가 창 크기 조정을 멈출 때까지 기다렸다가 resizing event 사용하기 위해
👆 사용자가 키보드 입력을 중지(예: 검색창) 할 때까지 ajax 이벤트를 발생시키지 않기 위해
👆 페이지의 스크롤 위치를 측정하고 최대 50ms 마다 응답하기를 바랄 경우에
👆 앱에서 요소를 드래그 할 때 좋은 성능을 보장하기 위해

 

 

Debounce

이벤트를 그룹화하여 특정시간이 지난 후 하나의 이벤트만 발생하도록 하는 기술이다.

연이어 호출되는 함수들 중 마지막 함수(또는 제일 처음)만 호출하도록 하는 것

Debounce가 작동되는 방식 예제

See the Pen Debounce. Trailing by jaeheekim (@jaehee) on CodePen.

연속적으로 Trigger Area를 클릭 해 보아라!

 

 

 

리사이즈 예제(Resize Example)

브라우저 창 크기를 조정하는 경우에 동시에 많은 이벤트가 생긴다. 이를  Debounce를 사용하여 마지막 결과만 추적하도록 할 수 있다.

 

See the Pen Debounce Resize Event Example by jaeheekim (@jaehee) on CodePen.

 

Throttle

이벤트를 일정한 주기마다 발생하도록 하는 기술이다.

예를 들어 설정시간을 0.05ms로 주면 0.05ms동안 최대 한번만 실행한다.

마지막 함수가 호출된 후 일정시간이 지나기 전까지 다시 호출되지 않도록 하는 것

 

 

무한 스크롤링 페이지(Infinite scrolling page)

디바운싱은 사용자가 스크롤을 멈출 때만 이벤트를 발생시키므로 디바운싱보다는 스로틀이 적합하다. 사용자가 footer 에 도달하기 전에 콘텐츠를 가져와야 때문이다.

 

 

See the Pen Infinite scrolling throttled by jaeheekim (@jaehee) on CodePen.

 

 

 

디바운싱과 스로틀의 차이 
Throttle은 적어도 x 밀리 초마다 기능 실행을 보장한다.
Debounce 는 아무리 많은 이벤트가 발생해도 모두 무시하고  딱 한번만 마지막 이벤트를 발생시키는 기법이다.

 

 

See the Pen The Difference Between Throttling, Debouncing, and Neither by jaeheekim (@jaehee) on CodePen.

 

출처 및 코드 
https://webclub.tistory.com/607