`debounceOn`, `delayOn` & `throttleOn`

선택자가 정하는 시간: 값마다 언제 내보낼지를 정하는 스트림을 고릅니다 — Duration 없이 debounce, delay, throttle.

FxEvents<T> FxEvents<T>.debounceOn(Stream<void> Function(T value) selector) // chain (events) FxEvents<T> FxEvents<T>.delayOn(Stream<void> Function(T value) selector) FxEvents<T> FxEvents<T>.throttleOn(Stream<void> Function(T value) selector, {bool leading = true, bool trailing = false})

강의

Duration 형태는 이미 debounce, throttle, delay에 있습니다 — 고정된 시계, 모든 값에 같은 대기. xOn 가족은 그 시계를 선택자에 넘깁니다: 값마다 스트림을 만들고, 그 스트림의 첫 이벤트가 값이 나갈 순간입니다. 300ms 대신 포커스가 떠나는 순간을 기다리고, 긴 검색어는 더 길게 디바운스하고, 타이머가 아니라 버튼이 눌릴 때 붙든 값을 풀어 주세요.

debounceOn(selector)는 그 스트림을 잠잠한 창으로 쓰는 트레일링 디바운스입니다. 더 새로운 값은 이전 내부를 중단하고 새것을 시작하며, 내부의 첫 next가 대기 중인 값을 내보내고, next 없이 완료된 내부는 그 값을 버립니다. 소스가 닫힐 때 아직 대기 중인 값은 흘려보내져, Duration debounce와 같습니다.

delayOn(selector)는 모든 값을 자기 내부가 발화할 때까지 붙듭니다 — 중단이 없으므로, 선택자가 순서를 바꾸면 값도 순서를 바꿉니다. Rx의 delayWhen과 같습니다. 닫기는 아직 끝나지 않은 내부를 기다리고, 에러는 즉시 전달됩니다 — 붙들어 둘 가치가 있는 것은 데이터뿐이니까요.

throttleOn(selector)는 내부 창마다 이벤트를 최대 하나 내보냅니다: leading(기본 켜짐, 스트림 형태 throttle과 같음)은 창의 첫 값을 지키고, trailing은 내부가 발화할 때 — 또는 창 한가운데 소스가 닫힐 때 — 본 가장 새로운 값을 지킵니다. fxdart 이벤트 레이어, Rx의 선택자 형태 debounce, delayWhen, throttle을 따랐습니다.

데모 1 · 버스트, 선택자가 발화할 때 풀기

데모 2 · 알림 스트림이 가라고 할 때까지 붙들기

import 'dart:async';

import 'package:fxdart/fxdart.dart';

Future<void> main() async {
  // delayOn holds every value until ITS selector fires once. Here the
  // selector is a shared notifier, so nothing moves until we say go.
  final source = StreamController<String>();
  final release = StreamController<void>.broadcast();
  final seen = <String>[];
  final done = Completer<void>();

fxEvents(source.stream)
      .delayOn((_) => release.stream)
      .listen(seen.add, onDone: done.complete);

source
    ..add('held a')
    ..add('held b');
  await Future<void>.delayed(const Duration(milliseconds: 20));
  print(seen); // [] — both values are waiting on the notifier

release.add(null);
  await Future<void>.delayed(const Duration(milliseconds: 20));
  print(seen); // [held a, held b]

await source.close();
  await done.future;
  await release.close();
  // Inners run independently, so if two selectors fired out of order
  // the values would too — matching Rx's delayWhen. Inner completion
  // without a next drops that value; the close waits for outstanding
  // inners.
}

직접 해 보기

연습: 내부 창마다 스크롤 오프셋 하나, 리딩 엣지.

import 'dart:async';

import 'package:fxdart/fxdart.dart';

/// Emits each (offsetMs, value) pair at its offset, closing at [closeMs].
Stream<T> timed<T>(List<(int, T)> events, int closeMs) {
  final c = StreamController<T>();
  for (final (ms, v) in events) {
    Timer(Duration(milliseconds: ms), () => c.add(v));
  }
  Timer(Duration(milliseconds: closeMs), c.close);
  return c.stream;
}

Future<void> main() async {
  // Exercise: a scroll offset firing constantly. throttleOn leading
  // (the default) keeps the first event of each inner window.
  final offsets = timed([(0, 0), (20, 40), (40, 90), (150, 160)], 200);

final leading = await fxEvents(offsets)
      .throttleOn((_) => Stream<void>.fromFuture(
            Future<void>.delayed(const Duration(milliseconds: 80)),
          ))
      .toList();

print(leading); // [0, 160]
  // The 80ms inner opened on 0 and swallowed 40 and 90; the next event
  // after that window (160) opened a new one. trailing: true would also
  // emit the newest value seen during each window.
}

관련 항목: debounce — Duration 형태, 그리고 콜백 래퍼 · throttle — Duration 형태, leading과 trailing · delay — 고정된 시계로 스트림 전체를 밀기

debounceOn, delayOn & throttleOn

강의

데모 1 · 버스트, 선택자가 발화할 때 풀기

데모 2 · 알림 스트림이 가라고 할 때까지 붙들기

직접 해 보기

`debounceOn`, `delayOn` & `throttleOn`