BACK
Use casesInfinite scroll — страницы без дублей
Use cases · 25

Infinite scroll — страницы без дублей

Паттерн

Лента, как у Twitter или Instagram. Доскролил до низа — подгружаем следующую страницу. Доскролил ещё — следующую. Без ручного клика «загрузить ещё».

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

Scroll эмитит десятки событий в секунду. И пока летит запрос для страницы 2, пользователь снова достигает низа — а флаг isLoading легко забыть сбросить во всех ветках (error, cancel, success). Результат — дубли страниц или потерянные items.

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

  • throttleTime — снижаем частоту scroll-событий до разумной.
  • filter — пропускаем дальше только событие «достигли низа».
  • exhaustMap — пока летит запрос за страницей, новые bottom-события ИГНОРИРУЮТСЯ. Это ключ к защите от дублей.
  • scan — накапливаем items по мере загрузки страниц.

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

  • switchMap — каждый scroll отменит текущую загрузку. Страницы будут пропадать.
  • mergeMap — параллельные запросы за одной и той же страницей. Backend в шоке, дубли в UI.
  • concatMap — каждое bottom-событие встанет в очередь. Пользователь проскроллил 10 раз — будет 10 страниц в очереди, последняя загрузится через минуту.

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

Каждая страница грузится ровно один раз. Быстрый скролл не создаёт лавину запросов.

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