[RxSwift] Debounce vs Throttle

 

검색 키워드에 따른 결과를 노출할때,

키워드의 변경사항에 대한 emit을 제어하려고 Debounce라는 오퍼레이터를 사용했었습니다.

 

RxSwift문법을 공부하면서 Throttle이라는 오퍼레이터를 접했는데, Debounce와 비슷하면서도 명확한 차이가 있어 정리하게 되었습니다.

 

 

Debounce와 Throttle은 이벤트를 (양적인 측면에서) 효율적으로 처리하기 위한 방법이라고 합니다.

구체적인 정의와 어떤 차이가 있는지 설명하겠습니다.

 

 

 

우선 디바운스에 대한 정의입니다.

 

직관적인 마블 다이어그램을 먼저 보자면.

 

ReactiveX 공식문서

이렇습니다.

 

여러개가 들어왔는데 마지막 item만 emit 됩니다.

 

즉, 일정한 시간 간격이 지나기 전에 값이 들어오면 그 값들은 emit 되지 않습니다. 

 

그러니깐 간격이 1초라고 했을 때! 값을 받고 난 후 1초가 지나야 만 받은 값들 중 가장 최신 값을 방출합니다.

 

저의 예제를 한번 보세요.

 

 

 

 

키워드를 입력받을 때 입력받은 키워드들에 대하여 입력을 멈추고 난 뒤 1초 뒤의 값을 emit 하는 예제입니다.

 

만약 디 바운스가 없을 때 apple이라고 키워드를 치면 (빠르게 타이핑했다는 가정)

 

'a', 'ap', 'app', 'appl', 'apple' 5개의 키워드에 대하여 emit이 됩니다.

 

그런데 Debounce를 걸었다? 그러면 맨마지막 'apple'에 대한 키워드만 emit 하도록 해줘요.

 

확실히 양적인 측면에서 효율적입니다.

 

Debounce 이해가 되셨으리라 생각합니다.

 

 

 

다음은 Throttle.

 

Throttle은 일정 시간 동안 요청이 한 번만 수행되도록 합니다. 

 

그러니까 시간 간격을 2초로 두면 2초 동안 한 번만 수행하도록 하는 거죠.

 

 

 

??? : Debounce랑 비슷한데? 구분이 안가네..

 

 

https://rxmarbles.com/#throttle

 

 

Debounce와 Throttle에 10초 동안 연속된 이벤트를 발생시킨다고 하면 (둘 다 시간 값 2s)

 

Debounce는 10초 + 2초 후 1번 이벤트 발생 

 

Throttle은 10초 동안 5번 이벤트를 방생

 

 

 

(차이점 아시겠나요?)

 

 

 

트위터에서 스크롤 관련 버벅거림이 발생했을 때 해결책으로써 제안한 방법론이라고도 합니다.

 

Throttle에 대해서 저도 이번에 알게 됐습니다.

 

페이지 마지막 스크롤에서 아래로 더 내리는 스크롤(인피니티 스크롤)을 할 때 1번만 이벤트를 발생시키려고

 

어떻게 해야 할지 고민하다가 if-flag로 처리해주었는데, 더 좋은 방법을 알게 된 것 같습니다.

 

 

 

검색 키워드에 대한 이미지의 결과를 스크롤 때마다 30개씩 fetch 해주는 기능 구현 영상입니다.

 

키워드 검색 이벤트 제어는 Debounce, 스크롤 이벤트 제어는 Throttle로 사용하면 좋을 것 같습니다.

 

www.youtube.com/watch?v=IcKxjbDUwKY

 

이렇게 사용될 수 있을 것 같습니다.

 

 

부족한 글 읽어주셔서 감사합니다:)