How to make countdown timer with RxJS Observables?

Question

I'm struggling to create a countdown timer using Observables, the examples at http://reactivex.io/documentation/operators/timer.html do not seem to work. In this specific example the error related to timerInterval not being a function of the Observable returned from timer.

I have also been experimenting with other approaches and the best I've come up with is:

Observable.interval(1000).take(10).subscribe(x => console.log(x));

The problem here is it counts up from 0 to 10 and I want a countdown timer e.g. 10,9,8...0.

I've also tried this but the timer does not exist for type Observable

Observable.range(10, 0).timer(1000).subscribe(x => console.log(x));

As well as, which produces no output at all.

Observable.range(10, 0).debounceTime(1000).subscribe(x => console.log(x));

To clarify I need help with ReactiveX's RxJS implementation, not the MircoSoft version.

Answer 1

You were on the right track - your problem was that timer does not exist on the prototype (and thereby on Observable.range())but on Observable (see the RxJS docs). I.e. jsbin

const start = 10;
Rx.Observable
  .timer(100, 100) // timer(firstValueDelay, intervalBetweenValues)
  .map(i => start - i)
  .take(start + 1)
  .subscribe(i => console.log(i));

// or
Rx.Observable
  .range(0, start + 1)
  .map(i => start - i)
  .subscribe(i => console.log(i));

Answer 2

Using timer, scan and takeWhile if you don't want to depend on a variable for your starting time, the 3rd argument in scan is the starting number

timer$ = timer(0, 1000).pipe(
  scan(acc => --acc, 120),
  takeWhile(x => x >= 0)
);

Check it out on Stackblitz

Answer 3

With interval, allows you to specify how long a second is

const time = 5 // 5 seconds
var timer$ = Rx.Observable.interval(1000) // 1000 = 1 second
timer$
  .take(time)
  .map((v)=>(time-1)-v) // to reach zero
  .subscribe((v)=>console.log('Countdown', v))

Answer 4

I am the take...() lover, so I am using takeWhile() as follow ( RxJS 6.x.x, in ES6 way )

import {timer} from 'rxjs';
import {takeWhile, tap} from 'rxjs/operators';


let counter = 10;
timer(1000, 1000) //Initial delay 1 seconds and interval countdown also 1 second
  .pipe(
    takeWhile( () => counter > 0 ),
    tap(() => counter--)
  )
  .subscribe( () => {
    console.log(counter);
  } );

Answer 5

This example worked for me :)

By the way, using takeWhile(val => val >= 0) instead of take(someNumber) might make sense but it will check -1 and only then complete.. 1 second too late.

The example below will emit 10, 9, 8, 7, 6, 5, 4, 3, 2, 1, 0. Starting at 10 and ending at 0 immediately seems trivial but it was rather tricky for me.

const counter$ = interval(1000); // rxjs creation operator - will fire every second
const numberOfSeconds = 10;

counter$.pipe(
    scan((accumulator, _current) =>  accumulator - 1, numberOfSeconds + 1),
    take(numberOfSeconds + 1),

    // optional
    finalize(() => console.log(
      'something to do, if you want to, when 0 is emitted and the observable completes'
    ))
)

This will do the same:

counter$.pipe(
    scan((accumulator, current) => accumulator - 1, numberOfSeconds),
    startWith(numberOfSeconds), // scan will not run the first time!
    take(numberOfSeconds + 1),

    // optional
    finalize(() => console.log(
      'something to do, if you want to, when 0 is emitted and the observable completes'
    ))
  )

You could, of course, make many changes.. you can mapTo(-1) before the scan for example, and then write accumulator + current and the current will be -1.

Answer 6

My counterdown function with display time:

import { Observable, timer, of, interval } from "rxjs";
import { map, takeWhile, take } from "rxjs/operators";

function countdown(minutes: number, delay: number = 0) {
   return new Observable<{ display: string; minutes: number; seconds: number }>(
      subscriber => {
        timer(delay, 1000)
          .pipe(take(minutes * 60))
          .pipe(map(v => minutes * 60 - 1 - v))
          .pipe(takeWhile(x => x >= 0))
          .subscribe(countdown => { // countdown => seconds
            const minutes = Math.floor(countdown / 60);
            const seconds = countdown - minutes * 60;

            subscriber.next({
              display: `${("0" + minutes.toString()).slice(-2)}:${("0" + seconds.toString()).slice(-2)}`,
              minutes,
              seconds
            });

            if (seconds <= 0 && minutes <= 0) {
              subscriber.complete();
            }
       });
   });
}

countdown(2).subscribe(next => {
  document.body.innerHTML = `<pre><code>${JSON.stringify(next, null, 4)}</code></pre>`;
});

Output i.e:

{
   "display": "01:56",
   "minutes": 1,
   "seconds": 56
}

Answer 7

This is the simplest approach imho:

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

const durationInSeconds = 1 * 60 // 1 minute

interval(1000).pipe(take(durationInSeconds), map(count => durationInSeconds - count)).subscribe(countdown => {
  const hrs  = (~~(countdown / 3600)).toString()
  const mins = (~~((countdown % 3600) / 60)).toString()
  const secs = (~~countdown % 60).toString()
  console.log(`${hrs.padStart(2, '0')}:${mins.padStart(2, '0')}:${secs.padStart(2, '0')}`);
})

Answer 8

As if there were not enough proposed solutions, I will add one more. It is a re-usable function with parameters to configure your countdown options, and it's written in TypeScript:

import { filter, interval, map, Observable, startWith, take } from "rxjs";

interface CountdownOptions {
    tickDuration?: number;
    emitZero?: boolean;
    emitInitial?: boolean;
}

/**
 * Creates an observable which emits a decremented value on every tick until it reaches zero.
 * @param ticks - the amount of ticks to count down
 * @param options (object):
 *          tickDuration - the duration of one tick in milliseconds (1000 by default)
 *          emitZero - whether to emit 0 at the end of the countdown, immediately before the observable completes (true by default)
 *          emitInitial - whether to emit initial countdown value immediately after the observable is created (true by default)
 */
function countdown(ticks: number, options: CountdownOptions = {}): Observable<number> {
    const tickDuration = options.tickDuration ?? 1000;
    const emitZero = options.emitZero ?? true;
    const emitInitial = options.emitInitial ?? true;

    const countdown$ = interval(tickDuration).pipe(
        take(ticks),
        map(n => ticks - 1 - n),
        filter(value => emitZero || value !== 0)
    );

    if (emitInitial)
        return countdown$.pipe(startWith(ticks));
    else
        return countdown$;
}

// SAMPLE USAGE

// starts immediately, logs values from 10 to 0, and completes immediately on 0
countdown(10).subscribe({
    next: x => console.log(`Launching in ${x} seconds...`),
    complete: () => console.log(`Launched!`)
});

// starts after 1 second, logs values from 9 to 1, and completes on 0 without emitting it
countdown(10, { emitZero: false, emitInitial: false}).subscribe({
    next: x => console.log(`Please wait ${x} seconds...`),
    complete: () => console.log(`Ready!`)
});

Answer 9

I also needed an interval that counts backward, so I tried this solution:

const { interval, take } = rxjs

const countDownEl = document.querySelector("#countdown");

/**
 * Coundown with RxJs
 * @param startPoint {number} Value of timer continuing to go down
 */
function countDown(startPoint) {
  // * Fire Every Second
  const intervalObs = interval(1000);

  // * Shrink intervalObs subscription
  const disposeInterval = intervalObs.pipe(take(startPoint));

  // * Fire incremental number on every second

  disposeInterval.subscribe((second) => {
    console.log("Second: ", second);
    countDownEl.innerHTML = startPoint - second;
  })
}

countDown(10);

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/7.3.0/rxjs.umd.min.js"></script>

<label>Countdown: <span id="countdown"></span></label>

Answer 10

Or this way :)

 interval(1000)
      .take(10)
      .map((t) => Math.abs(t - 10))
      .subscribe((t) => {
        console.log(t);
      });

Answer 11

Easy Appraoch

private countDown: Subscription = new Subscription();
public counter = 300; // seconds
private tick = 1000;

resetTimer() {
    this.canResendOTP = false;
    this.counter = 300;
    this.countDown.unsubscribe();
}

timer() {
    this.resetTimer();
    this.countDown = timer(0, this.tick)
    .subscribe(() => {
        --this.counter;
    });
}

Answer 12

const rxjs = require("rxjs");
function customTimer(seconds){
return rxjs
.range(0, seconds + 1)
.pipe(
  rxjs.concatMap((t) => rxjs.of(t).pipe(rxjs.delay(1000))),
  rxjs.map((sec) => ({
    hours: Math.trunc(sec / (60 * 60)),
    minutes: Math.trunc(sec / 60) - Math.trunc(sec / (60 * 60)) * 60,
    seconds: sec - Math.trunc(sec / 60) * 60,
  })),
  rxjs.map(time=>{
    return {
        hours:time.hours>9?`${time.hours}`:`0${time.hours}`,
        minutes:time.minutes>9?`${time.minutes}`:`0${time.minutes}`,
        seconds:time.seconds>9?`${time.seconds}`:`0${time.seconds}`
    }
  })
 );
}

function countDownTimer(startDate, endDate) {
 const seconds = (endDate - startDate) / 1000;
 return rxjs.range(0, seconds + 1).pipe(
        rxjs.concatMap((t) => rxjs.of(t).pipe(rxjs.delay(1000))),
        rxjs.map((sec) => seconds - sec),
        rxjs.takeWhile((sec)=>sec>=0),
        rxjs.map((sec) => ({
          hours: Math.trunc(sec / (60 * 60)),
          minutes: Math.trunc(sec / 60) - Math.trunc(sec / (60 * 60)) * 60,
          seconds: sec - Math.trunc(sec / 60) * 60,
    })),
    rxjs.map((time) => {
      return {
        hours: time.hours > 9 ? `${time.hours}` : `0${time.hours}`,
        minutes: time.minutes > 9 ? `${time.minutes}` : `0${time.minutes}`,
        seconds: time.seconds > 9 ? `${time.seconds}` : `0${time.seconds}`,
     };
   })
  );
 }

// Normal Countdown timer
customTimer(3600).subscribe(time=>console.log(time));

// Reverse  Countdown timer
const startDate = new Date();
const endDate = new Date();
endDate.setMinutes(startDate.getMinutes() + 1);
countDownTimer(startDate, endDate).subscribe((time) => console.log(time));