BACK
Use casesTyping indicator — печатает / перестал печатать
Use cases · 47

Typing indicator — печатает / перестал печатать

Паттерн

В чате видна надпись «Алиса печатает…». Первый keypress включает индикатор сразу (true). После паузы — выключает (false). Два разных по времени поведения: мгновенно и с задержкой.

Какую проблему решаем

Императивный clearTimeout на каждый keypress + новый setTimeout на «выключить через секунду» — легко забыть очистить при destroy или смене активного чата. Получаем «зомби-индикатор», который выключается после ухода со страницы.

Операторы и зачем они нужны

  • merge — объединяем два потока: «true сразу» и «false через паузу».
  • mapTo(true) — каждый keypress эмитит true немедленно.
  • debounceTime(N), mapTo(false) — после N мс тишины эмитит false.
  • startWith(false) + distinctUntilChanged — initial state и подавление дубликатов.

Подводные камни

  • delay без отмены — false прилетит даже если пользователь продолжил печатать. Нужен именно debounce.
  • Без distinctUntilChanged родитель получит десяток true подряд на быстрый ввод.
  • Отправку typing-события на сервер throttle-ите отдельно — никто не хочет сотен сообщений в секунду.

Что в итоге получаем

Индикатор включается мгновенно при первом нажатии и выключается только после реальной паузы.

script.ts // TypeScript
CONSOLE · Console Output
Нажмите на запуск, чтобы увидеть результат...