웹/앱 사용자가 스크롤(scroll wheel), 트랙패드, 스크롤 막대를 드래깅 했을 때, 이 행위로 인해 수많은 스크롤 이벤트가 발생한다.
과도한 이벤트 횟수의 실행으로 무거운 계산 및 기타 DOM 조작과 같은 작업을 수없이 많이 수행하기 때문에
성능 문제가 발생한다.
이를 막기 위해 등장한 방법이 Throttle,Debounce이다.
이벤트 핸들러가 많은 연산을 수행할 때 (이벤트 핸들러의 과도한 횟수가 발생하는 것)하는 것을 제어할 수 있는 기술이다.
사용 사례
👆 사용자가 창 크기 조정을 멈출 때까지 기다렸다가 resizing event 사용하기 위해
👆 사용자가 키보드 입력을 중지(예: 검색창) 할 때까지 ajax 이벤트를 발생시키지 않기 위해
👆 페이지의 스크롤 위치를 측정하고 최대 50ms 마다 응답하기를 바랄 경우
👆 앱에서 요소를 드래그 할 때 좋은 성능을 보장하기 위해
Debounce
이벤트를 그룹화하여 일정 시간이 지난 후 하나의 이벤트만 발생하도록 하는 기술이다.
연이어 호출되는 함수 중 마지막 함수(또는 제일 처음)만 호출하도록 하는 것
Debounce가 작동되는 방식 예제
연속적으로 Trigger Area를 클릭 해 보아라!
리사이즈 예제(Resize Example)
브라우저 창 크기를 조정할 때 동시에 많은 이벤트가 생긴다. 이를 Debounce를 사용하여 마지막 결과만 추적하도록 할 수 있다.
Throttle
이벤트를 일정한 주기마다 발생하도록 하는 기술이다.
예를 들어 설정시간을 0.05ms로 주면 0.05ms 동안 최대 한 번만 실행한다.
마지막 함수가 호출된 후 일정 시간이 지나기 전까지 다시 호출되지 않도록 하는 것
무한 스크롤링 페이지(Infinite scrolling page)
디바운싱은 사용자가 스크롤을 멈출 때만 이벤트를 발생시키므로 디바운싱보다는 스로틀이 적합하다.
사용자가 footer에 도달하기 전에 콘텐츠를 가져와야 때문이다.
디바운싱과 스로틀의 차이
Throttle은 적어도 x 밀리초마다 기능 실행을 보장한다.
Debounce 는 아무리 많은 이벤트가 발생해도 모두 무시하고 한 번만 마지막 이벤트를 발생시키는 기법이다.
출처 및 코드
https://webclub.tistory.com/607
