Throttle 와 Debounce 는 자주 사용되는 이벤트나 함수들의 실행되는 빈도를 줄여 성능상의 유리함을 가져오기 위한 개념이다. 즉 이벤트를 제어하는 방법이다.
예를 들어 스크롤 이벤트에서 사용자가 스크롤을 움직일 때 마다 스크롤 이벤트가 발생한다.
매번 스크롤 이벤트에 대한 콜백이 발생하고 그 콜백이 수행하는 일이 매우 큰 리소스를 잡아먹는다. 이는 결국 서비스의 성능 저하를 발생시킨다. 이를 해결하기 위한 해결책이 바로 Throttle 과 Debounce 개념.
📒 Throttle
Throttle 은 이벤트를 일정한 주기마다 발생하도록 하는 개념이다.
예를 들어 Throttle의 설정 시간으로 1ms를 주게 되면 해당 이벤트는 1ms 동안 최대 한번만 발생하게 된다. (너무 짜잘한 값에 대해 일일이 반응할시에 발생하는 성능 저하를 막기 위해 사용)
=> 마지막 함수가 호출된 후 일정 시간이 지나기 전에 다시 호출되지 않도록 하는 것
특성 자체가 실행 횟수에 제한을 거는 것이기 때문에 일반적으로 성능 문제 때문에 많이 사용한다.
ex) 무한 스크롤링 페이지
📒 Debounce
Debounce 는 이벤트를 그룹화하여 특정 시간이 지난 후 하나의 이벤트만 발생하도록 하는 개념이다. 순차적인 호출을 하나의 그룹으로 그룹화할 수 있다.
ex) 자동 완성 양식 키
📒 Throttle vs Debounce
두 개념의 차이점은 이벤트를 언제 발생 시킬지의 시점 차이이다.
Debounce 는 입력이 끝날때까지 무한적으로 기다리지만, Throttle 는 입력이 시작되면, 일정 주기로 계속 실행한다.
두 개념은 작업물의 성격에 따라 사용 방법이 달라질 수 있다.
대표적인 예로 자동완성을 만들 경우,
일정 주기로 자동으로 완성되는 리스트를 보여주는 것에는
사용자 측면에서 Throttle (검색되는 경험) 가 유리할 수 있지만,
성능상에서는 Debounce (1번만 호출) 가 훨씬 유리할 수 있다.
