51. Project: защита submit-кнопки

Проект 3 — защита от двойного submit

Реальная проблема: пользователь жмёт кнопку «Купить» три раза подряд. Без защиты — три запроса, три списания. Решение — exhaustMap.

Почему именно exhaustMap

Сравним варианты:

mergeMap: все клики уйдут параллельно. Плохо — дубли.
switchMap: каждый новый клик отменит предыдущий. Тоже плохо — пользователь думает, что заказ ушёл, а его отменили.
concatMap: клики встанут в очередь, и все выполнятся. Плохо — те же дубли, только последовательно.
exhaustMap: первый клик стартует, остальные игнорируются. То что нужно.

Что нужно сделать

В protectSubmit$ внутри pipe добавьте exhaustMap(click => submitForm(click)).
Клики 2 и 3 попадают в окно занятости — они игнорируются. Клик 4 приходит после, он обработается.

Детерминированная проверка

В этой задаче проверка идет через виртуальное время TestScheduler. Если решение верное, в консоли появится только Test Passed!. Не добавляйте лишние console.log, иначе проверка провалится.

Решение spoiler · click to reveal

const { exhaustMap } = Rx;

function protectSubmit$(clicks$, submitForm) {
  return clicks$.pipe(
    exhaustMap(click => submitForm(click))
  );
}

script.ts // TypeScript

CONSOLE · Console Output

Нажмите на запуск, чтобы увидеть результат...