RxJava를 사용한 Debounce 구현

이번 포스트에서는 RxJava를 사용하여 간단하게 EditText에 Debounce를 구현하는 시간을 가져보도록 하겠습니다.

우선 시작하기에 앞서 Debounce가 무엇인지 알아보고 가도록 하겠습니다.

Debounce vs. Throttle

Debounce를 더 잘 설명하기 위해 비슷한 개념 중 하나인 Throttle과 함께 설명하도록 하겠습니다.

Scrolling Event가 발생 할 때 마다 호출되는 Call Back이 있다고 가정해보도록 합시다.

이 말은 1px만 스크롤되어도 이벤트가 발생한다는 것을 의미합니다. 이런 Scrolling Event에 매 번 Call Back이 발생한다면 어떨까요?

그리고 그 Call Back이 수행하는 일이 리소스를 굉장히 많이 먹는 작업이라면 어떨까요?

Throttle 과 Debounce는 이벤트가 굉장히 많이 발생하는 것에 일정 수준의 제약을 걸어 제어할 수 있는 수준으로 이벤트를 발생시키도록 하는 것이라고 이해하면 좋습니다.

 

Throttle

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

예를 들어 Throttle 의 설정시간으로 10ms 를 주게되면 해당 이벤트는 10ms 동안 최대 1번만 발생하게 됩니다.

설정시간 : 10ms

일반 : 이벤트1 이벤트2 이벤트3 이벤트4
Throttle : 이벤트1 ( 10ms ) 이벤트2 ( 10ms ) 이벤트3 ( 10ms ) 이벤트4

 

Debounce

설정시간 : 10ms

Debounce 예제 1 : 이벤트1 이벤트2 ( 10ms )  → 이벤트2발생!

Debounce 예제 2 : 이벤트1 이벤트2 ( 9.9ms ) 이벤트3 이벤트4( 10ms )  → 이벤트4 발생!

 

Throttle 과의 차이가 어떤지 아시겠나요?

Debounce는 아무리 많은 이벤트가 발생하더라도 모두 무시하고 설정된 시간 사이에 어떤 이벤트도 발생하지 않았을 때에만 딱 한 번 마지막 이벤트를 발생시키는 기법입니다.

따라서 10ms 가 지나기전에 계속 이벤트가 발생할 경우 콜백에 반응하는 이벤트는 발생하지 않고 계속 무시됩니다. 예제 2에서는 실제로 6개의 이벤트가 발생했음에도 불구하고 실제로 콜백이 반응하는 이벤트는 ‘이벤트 5’ 단 하나뿐이라는 것을 아실 수 있을 겁니다.

 

Debounce 구현

자 이제 Debounce가 무엇인지 알았으니 직접 구현해보도록 합시다.

본격적인 시작에 앞서 RxJava 사용을 위해 안드로이드 스튜디오 기준으로 gradle에 rxjava를 implement해주도록 합시다.

 

public class RxAndroidUtils {
    private static final String TAG = RxAndroidUtils.class.getSimpleName();
    private static RxAndroidUtils instance;
    private RxAndroidUtils() {

    }

    public static RxAndroidUtils getInstance() {
        if (instance == null) {
            instance = new RxAndroidUtils();
        }

        return instance;
    }


    public Observable<String> getEditTextObservable(@NonNull EditText editText) {
        // method that takes a editText as input and returns an observable

        return RxTextView.textChanges(editText)
                .map(charSequence -> charSequence.toString());
    }
}

Observable<String> editTextObservable = 
    RxAndroidUtils.getInstance().getEditTextObservable(binding.etEditContent);
    Disposable contentEditTextObservableDisposable = searchEditTextObservable
        .debounce(300, TimeUnit.MILLISECONDS)
        .observeOn(AndroidSchedulers.mainThread())
        .subscribe(s -> {
            binding.textView.setText(s);
        });

RxAndroidUtils라는 파일을 하나 생성하고 위에 코드를 작성하도록 합시다.

추가로 Activity에서 아래 코드를 사용하여 Debounce를 적용할 수 있습니다.

위의 코드는 300ms를 설정 시간을 두었음을 알 수 있습니다. 시간 단위는 일반 초 단위로도 바꿀 수 있습니다.

 

.debounce(300, TimeUnit.MILLISECONDS)

이 부분을 수정하여 수치와 시간 단위를 변경할 수 있습니다.

 

아, 코드 중에 binding.textView가 무엇이냐고 하는 분이 있을 것 같은데, 이것은 DataBinding을 사용한 것입니다.

관련글은 아래 링크를 통해 들어가서 학습하시면 될 것 같습니다.

 

Android Data Binding을 사용해보자

Android Data Binding을 사용해보자

도움이 되었다면 광고 한번 재미삼아 클릭해보시고 공감 눌러주시면 감사하겠습니다.