Сбросить вложенный Observable

Question

Я пытаюсь сделать Observable, чтобы при нажатии кнопки генерировался массив PAGE_SIZE (первый щелчок должен испускать [0, 1, 2, 3, 4]) с оговоркой, что после нажатия кнопки интервал начнет излучать большечисла, которые соединяются с оригиналом (т. е. после того, как пользователь нажимает, интервал должен выдавать [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], затем [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14] и т. д.).

Следующее почти выполняет то, что я хочу, но мне нужен весь процессначать заново, когда пользователь снова нажмет кнопку.

Есть идеи?

const PAGE_SIZE = 5;
let currentPage = 0;
const buttonEl = document.getElementsByTagName('button')[0];
const refreshSource$ = new rxjs.Subject().pipe(rxjs.operators.concatMap(() => rxjs.interval(5000)));
const clickSource$ = new rxjs.fromEvent(buttonEl, 'click').pipe(rxjs.operators.tap(() => {
  refreshSource$.next();
  refreshSource$.complete();
}));
const clips$ = rxjs.merge(clickSource$, refreshSource$).pipe(rxjs.operators.mergeMap(value => {
  if (value.type === undefined)
    return makeObservable(value + 1);
  else
    return makeObservable(0);
}), rxjs.operators.scan((acc, value) => acc.concat(value)), rxjs.operators.startWith([]));
clips$.subscribe(value => {
  console.log('clips$', value);
});
function makeObservable(page) {
  return rxjs.of(d3.range(page * PAGE_SIZE, (page + 1) * PAGE_SIZE));
}

Answer 1

Что вам нужно, это переключать карту при каждом щелчке, чтобы новый наблюдаемый перезапустил генерацию вашего массива:

import { interval, fromEvent } from 'rxjs';
import { switchMap, take, map } from 'rxjs/operators';

const buttonEl = document.getElementById('button');
const pagesize = 5;

fromEvent(buttonEl, 'click')
  .pipe(
    // restart counter on every click
    switchMap(() => 
      interval(500).pipe(take(5)) 
    ),
    map(i => {
      const max = (i+1) * pagesize;
      return Array.from(Array(max).keys());
    })
  ) 
  .subscribe(console.log);

(stackblitz: https://stackblitz.com/edit/rxjs-v85ctu?file=index.html)

Для полной ссылки наоператор switchMap см .: https://www.learnrxjs.io/operators/transformation/switchmap.html