[Event Loop Handling Technique] Throttling과 Debouncing

Throttling과 Debouncing 두 기법 모두 과도한 이벤트나 함수들의 빈도수를 줄여서 성능을 향상시킬 수 있다. 

=> 과도한 이벤트 처리는 사용자 경험에도 비용에도 좋지 않음! 

 

Throttling과 Debouncing의 차이점 

Throttle

- 맨 처음 먼저 실행 -> 설정 시간 지난 후 다시 호출 

- 설정 시간 내 최대 한번만 이벤트를 발생 

 

(ex) 페이지에서 계속 전 날짜를 조회하는 버튼을 누르는 경우

처음 클릭때 실행되고 300초 뒤에 다시 실행 

* 버튼을 누르고 있더라도 300초 마다 API 콜(실행) 됨. 

 

Debounce

- 연이어 호출되는 함수 중 마지막 함수(또는 처음)만 호출 하도록 하는것 

- 아무리 많은 이벤트가 발생하더라도 처음 or 마지막의 단 한번만 이벤트 발생! 

 

(ex) 페이지에서 연속적으로 전 날짜를 조회하는 버튼을 클릭하는 경우

계속 클릭이 (이벤트가 일어나면) 마지막 클릭시에만 이벤트를 실행 

 

 

* 중복 클릭 방지를 위한 다른 방법으로는 

toggle 변수를 두고 한번 클릭 후에는 못하도록 막아두는 방법이 있음 

 

 

(! 인터뷰 문제 자주 출몰 !)