Rx JS: индикатор с обратным отсчетом - PullRequest
Новая
       27

Rx JS: индикатор с обратным отсчетом

0 голосов
/ 07 апреля 2020

Я пытаюсь сделать кнопку с индикатором выполнения и текстом под кнопкой, которая покажет, сколько осталось времени. Я использую индикатор прогресса ioni c, который принимает значение в диапазоне [0 ... 1]. 

public timeToClose = 5 * 1000;

...

const interval = this.timeToClose / 100;
    timer(0, interval).pipe(
      tap((v) => this.progress = v / 100),
      map(i => this.timeToClose - i * interval),
      take(100),
      tap((timeLeft) => this.timeLeft = Math.floor(timeLeft / 1000) + 1),
      finalize(() => this.closeModal()),
    ).subscribe();

Но это выглядит ужасно. Как я могу сделать это лучше код?

1 Ответ

0 голосов
/ 07 апреля 2020

Я бы сделал это так: 

of(5).pipe( // <- time in seconds we want the delay.
    map(v => v * 1000),
    switchMap(delay => {
        const start = new Date().getTime();
        return timer(0, 250).pipe( // <- speed of updates.
            map(() => (new Date().getTime() - start) / delay),
            takeWhile(result => result < 1, true),
        );
    }),
    tap(v => this.progress = v), // <- your stuff
    finalize(() => this.closeModal()), // <- your stuff
).subscribe();
...