Debounce와 Throttle

[Youngminah]

Debounce

• 입력 -> 바로 입력 안되고 대기 -> 일정 시간 후 마지막 이벤트만 입력
• 주로 텍스트 필드 입력에 사용

searchBar.rx.text
    .orEmpty // 옵셔널 해제 역할
    .debounce(RxTimeInterval.milliseconds(50), scheduler: MainScheduler.instance) //기다림
    .distinctUntilChanged() //같은 값을 받지 않음
    .subscribe(onNext: { [unowned self] value in
        self.viewModel.filterDate(query: value)
    })
    .disposed(by: disposedBag)

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번 반영
  • 여러번 발생하는 이벤트를 일정 시간 동안, 한번만 실행 되도록 만드는 개념
  • 버튼 탭
  • 스크롤을 빨리 내리면 3초의 간격 몇천개 데이터 요청할때