2월23일 - debounce, throttle

공통점

debounce, throttle 둘 다 공통적으로 

자주 사용되는 이벤트나 함수들의 실행되는 빈도를 줄여 성능상의 유리함을 가져오기 위한 개념인데

서버의 데이터를 요청하거나 UI 이벤트를 처리하는 과정에서

생기는 부하를 크게 줄여주기 때문에 알아두면 좋다.

 

차이점

둘의 차이점은 이벤트를 언제 발생시킬지의 시점 차이다.

debounce는 입력이 끝날 때 까지 기다리지만

throttle은 입력이 시작되면 일정 주기로 계속 실행한다.

 

예시

debounce: onChange()를 활용한 자동완성 기능

throttle: 스크롤 이벤트, 게임에서의 동작 버튼

 

사용 방법

https://github.com/niksy/throttle-debounce

GitHub - niksy/throttle-debounce: Throttle and debounce functions.

위 라이브러리를 통해 아주 쉽게 debounce와 throttle을 사용할 수 있다고 한다.

 

정리

자세한건 아래 블로그들에 너무 정리가 잘 되어 있기 때문에

내가 굳이 옮겨 적기 보단 들어가서 직접 보는게 더 좋다고 판단하기에 여기에서 마치겠다.

 

 

참고한 곳

https://velog.io/@letthere/developic-Lodash-throttle-debounce

[developic] 검색 페이지- throttle & debounce

https://pks2974.medium.com/throttle-%EC%99%80-debounce-%EA%B0%9C%EB%85%90-%EC%A0%95%EB%A6%AC%ED%95%98%EA%B8%B0-2335a9c426ff

Throttle 와 Debounce 개념 정리하기