스로틀과 디바운스

스로틀 (Throttle)

 

스로틀은 특정 이벤트가 발생할 때, 정해진 시간 간격마다 함수를 실행하는 기법이다. 

 

그래서 이벤트가 발생해도 일정시간마다 한 번만 함수를 호출하게 된다.

 

스로틀을 사용하는 예시는 다음과 같다.

• 스크롤 이벤트를 사용하면서 스크롤의 위치를 추적할 때 너무 많은 이벤트가 발생하는 것을 방지
• 윈도우 크기 조정 이벤트(resize)에서 일정 간격마다 해당 이벤트를 처리

스로틀을 사용하면 다음과 같이 동작한다.

1. 이벤트가 발생하여 함수가 실행된다.
2. 설정된 시간동안 추가적인 호출이 무시된다.
3. 설정된 시간이 지나면 다음 이벤트에 대해 함수를 실행할 수 있다.

스로틀은 일정 시간마다 실행하는 것이 목적이며, 설정된 시간 간격으로 호출하는 방식으로 동작한다고 정리해볼 수 있다.

 

디바운스 (Debounce)

 

디바운스는 특정 이벤트가 발생한 후 일정한 시간동안 추가적인 이벤트가 발생하지 않을 때 함수를 실행하는 기법이다. 

 

그래서 사용자가 중복된 이벤트를 발생시키는 것을 방지해서 최종적으로 발생한 이벤트만 처리한다.

 

디바운스를 사용하는 예시는 다음과 같다.

• 검색기능에서 사용자가 입력하는동안 API 요청의 최소화
• 창 크기 조정 이벤트에서 최종적인 크기로 조정한 이후에만 처리

디바운스는 다음과 같이 동작한다.

1. 사용자가 이벤트를 발생시키면 정해진 시간동안 우선 대기한다.
2. 그 시간동안 새 이벤트가 없으면 함수를 실행한다.
3. 만약 새 이벤트가 발생하면 타이머가 리셋된다.

정리하면 디바운스는 이벤트 발생 후 일정 시간을 대기하는 것이 목적이며, 마지막 호출 후에 설정해 놓은 일정 시간을 대기하다가 함수를 호출하는 방식으로 동작한다.