Rxを使用せず、Flowを使用して複数回のクリックを防止

🤔 悩みの始まり

🆖 既存のRxJavaを使用したマルチタッチコード

private fun View.setRxBindingClicks() {
		this.clicks()
				.throttleFirst(1000, TimeUnit.MILLISECONDS)
				.subscribe { onClick(id) }
				.addTo(disposeBag)
}

private fun onClick(id: Int) {
		when (id) {
				R.id.______ -> clickEvent()
		}
}

🆕 Rx → Flow

演算子のカスタマイズ

// FlowExtensions.kt

// 클릭 이벤트를 flow로 변환
fun View.clicks(): Flow<Unit> = callbackFlow {
    setOnClickListener {
        this.trySend(Unit)
    }
    awaitClose { setOnClickListener(null) }
}

// 마지막 발행 시간과 현재 시간 비교해서 이벤트 발행, 나머지는 무시.
fun <T> Flow<T>.throttleFirst(windowDuration: Long): Flow<T> = flow {
    var lastEmissionTime = 0L
    collect { upstream ->
        val currentTime = System.currentTimeMillis()
        if (currentTime - lastEmissionTime > windowDuration) {
            lastEmissionTime = currentTime
            emit(upstream)
        }
    }
}

活用する

// ViewExtensions.kt

fun View.setClickEvent(
    uiScope: CoroutineScope,
    windowDuration: Long = THROTTLE_DURATION,
    onClick: () -> Unit,
) {
    clicks()
        .throttleFirst(windowDuration)
        .onEach { onClick.invoke() }
        .launchIn(uiScope)
}

// ____Activity.kt

button.setClickEvent(lifecycleScope) {
		Log.i("[TAG]", "click - ${System.currentTimeMillis()}")
}

🔗 リファレンス