Search code examples
angulartimerrxjsobservablecountdown

Angular RxJS timer works not like it's supposed to


I followed the answer from here: https://stackoverflow.com/a/59346314/12360035 I already have a timer implemented according to this answer: https://stackoverflow.com/a/64374454/12360035 My solution apparently only counts down to 14:59 and gets stuck there. How to fix this? My HTML:

<p> {{ this.authenticationService.countDown$ | async | date:'mm:ss' }} </p>

Changed the timer to the following code and now it starts counting from 00:00 and instantly jumps to 59:59 and starts counting down but after some time it freezes at 00:00. It should be a 15 minutes countdown. My modified code:

 StartTimer() {
    this.countDown$ = merge(
      fromEvent(document, 'mousedown'),
      fromEvent(document, 'mousemove'),
      fromEvent(document, 'click'),
      fromEvent(document, 'keydown'),
      fromEvent(document, 'scroll')
    ).pipe(
      startWith(false),
      switchMap(_ => {
        // * 1000 to turn the number into miliseconds
        let counter = (15 * 60 * 1000) + 1;
        return timer(0, 1000).pipe(
          take(counter),
          // count down in ms!!
          map(_ => --counter * 1000),
          tap(null, null, () => {
            console.log('countdown complete');
            // redirect to login page
            window.location.href = 'http://IPHERE:8080/logout';
          })
        );
      })
    );

Solution

  • In take you're using the millisecond, you need to use the seconds here. In map you're subtracting 1 from the milliseconds then multiply by 1000 giving you microseconds, you need to supply the correct milliseconds here.

    I would do it like this:

    switchMap(_ => {
      let counter = 15 * 60; // seconds
      return timer(0, 1000).pipe(
        take(counter + 1),
        // subtract the seconds that have past and turn the result into milliseconds
        map(t => (counter - t) * 1000),
        tap({
          complete: () => {
            console.log("countdown complete");
            // redirect to login page
            window.location.href = "http://IPHERE:8080/logout";
          }
        })
      );
    })