관리 메뉴

김종권의 iOS 앱 개발 알아가기

[RxSwift] 5. throttle, debounce 본문

RxSwift/RxSwift 응용

[RxSwift] 5. throttle, debounce

jake-kim 2020. 9. 27. 01:05

debounce

  • 입력 -> 바로 입력 안되고 대기 -> 일정 시간 후 입력
  • 주로 텍스트 필드 입력에 사용
  • 코드 (쉬운 예시를 위해서 버튼 입력에 적용)
        btnDebounce.rx.tap.asDriver()
            .debounce(.seconds(3))
            .drive(onNext: { (_) in
                self.debounceCount += 1
                self.lblDebounce.text = "\(self.debounceCount)"
            }).disposed(by: disposeBag)

throttle

  • 입력 - > 바로 입력 -> 대기 
  • 주로 버튼 중복 입력 방지에 사용
  • 코드
btnThrottle.rx.tap.asDriver()
            .throttle(.seconds(3))
            .drive(onNext: { (_) in
                self.throttleCount += 1
                self.lblThrottle.text = "\(self.throttleCount)"
            }).disposed(by: disposeBag)

 

* throttle를 10초로 설정하고 9초동안 100번 누르면, 첫 번째는 누르자 마자1되고, 10초가 지난 후 누적되어있던 것중 최신의 값 하나가 더 반영되어 총 2개가 발생 -> 오직 한번만 반영되려면 latest: false로 설정하여 해결 (default는 true)

.throttle(.seconds(10), latest: false)

Debounce vs Throttle

  • Debounce: 버튼 누름 -> 대기 (다시 누르면 리셋되어서 대기 상태) "시간 값이 1초일 때, 중복으로 99초동안 100번 누르면 1번 반영"
  • Throttle: 버튼 누름 -> 입력 (다시 누르면 리셋되지 않고, 기존에 있던 값을 시간 지났을 때 반영) "시간 값이 1초일 때, 0.9초동안 100번 누르면 2번 반영

사용처

  • Throttle 는 여러번 발생하는 이벤트를 일정 시간 동안, 한번만 실행 되도록 만드는 개념
    • 버튼 탭
    • 스크롤을 빨리 내리면 3초의 간격 몇천개 데이터 요청할때
  • Debounce 는 여러번 발생하는 이벤트에서, 가장 마지막 이벤트 만을 실행 되도록 만드는 개념
    • 자동완성
    • 연관검색어 노출
Comments