1. 개념


두 가지 방법 모두 DOM 이벤트를 기반으로 실행하는 JavaScript 성능상의 이유로 JS의 양적인 측면, 즉 이벤트(event)를 제어(제한)하는 방법이다.

즉, Debounce와 Throttle은 이벤트 핸들러가 많은 연산을 수행하는 경우에 대해 제약을 걸어 제어할 수 있는 수준으로 이벤트를 발생시키는 것을 목표로 하는 기술이다.

ex)

검색어를 입력할 때 연관 검색어가 나오게 API를 호출하는 기능을 만들 때 타자를 입력할 때마다 API를 호출하면 리소스 낭비가 심한데 Debounce나 Throttle 기능을 적용하면 이러한 리소스 낭비를 줄일 수 있다.

2. debounce


Debounce (디바운스)

3. Throttle


Throttle(쓰로틀)