Debounce / Throttle

Reactive Programing에 대해 알게 된 지 얼마되지는 않았지만 (..) 물론 여전히 나는 헤매는 중이지만..

간단히 Reactive Programing은 비동기적 데이터 흐름을 다루는 프로그래밍이다Reactive programming is programming with asynchronous data streams.

 

이 관련 얘기는 꽤나 길어질 듯하고, 더 공부해야할 부분이 많으니 다음 주제로 써먹도록(?) 하고..

 

간단하게 이 주제를 왜 선정했느냐 하면, 1. 앞서 얘기한 리액티브 프로그래밍에 대해 공부하다가 자주 나온 개념 중 하나이고, 2. 회사에서 ThrottleLast가 아니라 ThottleFirst를 써야하지 않느냐라는 코드리뷰에서 뭔 소리인지 못 알아먹었었기 때문이며, 3. 자바스크립트에도 동일한 개념이 존재하기 때문이다. (^^ 우리는 모두 친구)

 

 

Debounce, Throttle

두 개념은 모두 이벤트가 과도한 횟수로 발생하는 것에 제약을 걸어 제어할 수 있는 수준으로 이벤트를 발생시키는 것을 목적으로 사용하는 개념이다.

EX. Scrolling, TextChange 이벤트에 주로 적용된다.

 

가장 흔히 드는 예시를 하나만 들어본다면,

검색창에 검색어를 입력할 것이고, 그에 따라서 연관 검색어가 표시되었으면 한다고 치자.

이러한 검색어를 입력할 때

D -> De -> Deb -> ... -> Debounce Thorottle

과 같이 이벤트가 발생할 것이다. 실시간으로 입력하는 텍스트가 변경할 때마다 연관 검색어가 바뀌게 한다면 서버에는 순식간에 엄청난 요청을 넣는 (..) 엄청난.. 일이 벌어질 수 있게 된다. (유저들이 검색 한 번할 때마다 디도스 급으로 공격받을 수도 있다.) 심지어 이벤트를 캐치하는 주기가 매우 짧다면 D -> De를 입력하는 와중에도 실제로 입력되는 이벤트는 D -> D -> De 와 같이 인식될 수도 있는 것이다.

 

이러한 이벤트를 어떠한 방식으로 처리하느냐에 따라 방식이 나뉘게된다.

 

Throttle

• ThrottleLast() : 정해진 시간안에 마지막 내용만 리턴한다. (Sample이라고도 함)

• ThrottleFirst() : 정해진 시간안에 처음 내용만 리턴한다.

Throttle은 이벤트를 일정한 주기마다 발생하도록 하는 기술이다.

 

Debounce

이벤트를 그룹화하여 특정시간이 지난 후 하나의 이벤트만 발생하도록 하는 기술이다.

앞서 말한 검색어 예제에 자주 사용된다.

 

Debounce와 Throttle의 차이점

throttle의 경우 유저가 지정해둔 특정 시간 마다의 이벤트 실행을 보장하지만, Debounce는 특정시간이 지나기 이전에 꾸준히 이벤트를 발생시킬 경우 지속적으로 이벤트를 무시하게 된다는 점이다.

 

 

스크롤링 케이스로 두 이벤트 차이를 아주 명확하게 볼 수 있도록 만들어주신 분이 있어서 가져왔다.

실제로 이해하기 아주 편하고, 잘 정리되어 있다.

 

See the Pen The Difference Between Throttling, Debouncing, and Neither by jaeheekim (@jaehee) on CodePen.

codepen.io/jaehee/pen/jXrYQz

 

참고자료

https://medium.com/@progjh/throttle-debounce-개념-잡기-19cea2e85a9f

https://tourspace.tistory.com/284

webclub.tistory.com/607

javaexpert.tistory.com/806