Throttle과 Debounce는 자주 사용되는 이벤트나 함수의 실행 빈도를 줄여서, 성능 상의 유리함을 가져오는 개념이다. 자주 사용되는 간단한 예로는 자동 완성이 있다.
Throttle은 입력 주기를 방해하지 않고, 일정 시간 동안의 입력을 모아서 한번씩 출력을 제한한다.
여러 번 발생하는 이벤트를 일정 시간 동안 한 번만 실행되도록 만드는 개념이다. throttole을 500ms로 제한하면 500ms에 한 번 씩 실행이 되는 것이다.
Debounce는 입력 주기가 끝나면, 출력한다.
여러 번 발생하는 이벤트에서, 가장 마지막 이벤트만을 실행되도록 만드는 개념이다. 500ms동안 동일한 이벤트가 발생한다면, 입력이 끝날 때, 가장 마지막 이벤트만을 실행한다.
이 둘의 차이점은 이벤트를 언제 발생시킬지의 시점 차이이다.
Debounce는 입력이 끝날 때까지 무한정으로 기다리지만, Throttle은 입력이 시작되면, 일정 주기로 계속 실행한다.
대표적인 예시로, 일정 주기로 자동으로 완성되는 리스트를 보여주는 것에는 사용자 측면에서는 throttle이 유리하고, 성능상에서는 debounce가 훨씬 유리할 수 있다.