Используйте RxJS для запуска прядильщика, покажите его не менее 500 мс, а затем остановите максимум через 10 с - PullRequest
0 голосов
/ 05 октября 2019

У меня есть RxJS Subject<boolean>, который я использую, чтобы контролировать, должен ли спиннер запускаться (true) или останавливаться (false).

Я пытаюсь реализовать следующее поведение в RxJS:

  • Когда я запускаю спиннер, я хочу, чтобы он работал не менее 500 мс , даже если до этого были получены события остановки. В терминах RxJS: когда я выдаю значение true на моем предмете, таймер должен запускаться на 500 мс, и все значения false, излучаемые на предмете, должны игнорироваться, пока не истечет таймер.
  • Iхотите, чтобы вращатель автоматически останавливался через 10000 мс , даже если не было получено никакого события остановки. В терминах RxJS: когда я испускаю значение true на моем предмете, другой таймер должен запускаться на 10000 мсек, и значение false должно выдаваться, когда истекает этот таймер.

Я изо всех силреализовать это. Я не уверен, нужно ли мне несколько наблюдаемых / субъектов и какие операторы мне следует использовать (delayWhen, takeUntil ...)

Пока это мой спиннер:

export class SpinnerService {
  private isVisibleSubj$ = new Subject<boolean>();
  isVisible$ = this.isVisibleSubj$.asObservable();

  constructor() { }

  start() {
    this.isVisibleSubj$.next(true);
  }

  stop() {
    this.isVisibleSubj$.next(false);
  }
}

1 Ответ

0 голосов
/ 05 октября 2019

Вот мой подход:

let shouldSkipFalsy = false;

merge(
  of(true), // Start spinner
  of(false), // Ignored
  of(false), // Ignored
  of(false), // Ignored
  timer(400).pipe(mapTo(false)), // Ignored
  timer(10000).pipe(mapTo(false)), // Automatically stop after 10 seconds
)
  .pipe(
    exhaustMap(
      v => {
        if (v && !shouldSkipFalsy) {
          shouldSkipFalsy = true;

          /**
           * Spinner in action
           * Also ignore any falsy values for 500ms
           */
          return timer(500).pipe(mapTo(null), startWith(v), tap(() => shouldSkipFalsy = false))
        }

        return of(v);
      }
    ),
    filter(v => v !== null),
  )
  .subscribe(console.log)

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

StackBlitz .

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...