Time as a filter predicate

Explicit time: relative time & absolute time
Implicit time

Delay Operator


        rxjs.of([1, 2, 3, 4, 5])
            .pipe(
                rxjs.operators.tap(x => console.log(`Emitted: ${x}`)),
                rxjs.operators.delay(200)
            )

        rxjs.from([1, 2])
            .pipe(
                rxjs.operators.delay(2000),
                rxjs.operators.concat(rxjs.from([3, 4])),
                rxjs.operators.delay(2000),
                rxjs.operators.concat(rxjs.from([5, 6])),
                rxjs.operators.delay(2000)
            )

Use a Buffer internally
Apply only on event one by one

DebounceTime Operator


                rxjs.of(1, 10)
                    .pipe(rxjs.operators.debounceTime(2000))
                // Synchronous values with a complete() signal event bring about receive immediately the last event

DebounceTime synchronous value marble diagram


            rxjs.fromEvent(document, 'click')
                .pipe(
                    rxjs.operators.map((ev) => ev.clientX),
                    rxjs.operators.debounceTime(2000)
                )

It's like delay, but passes only the most recent value from each burst of emissions

Debounce Operator


            const clicks$ = rxjs.fromEvent(document, 'click')
            clicks$
                .pipe(
                    rxjs.operators.debounce(() => rxjs.interval(1000)),
                    rxjs.operators.map((ev)=> ev.clientX)
                )

It's like debounceTime, but the time span of emission silence is determined by a second Observable

ThrottleTime Operator


                rxjs.of(1, 10)
                    .pipe(
                        rxjs.operators.throttleTime(2000)
                    )
                // Synchronous  values with a complete() signal event
                // bring about receive immediately the first event and no more

ThrottleTime synchronous value marble diagram


                rxjs.fromEvent(document, 'click')
                    .pipe(
                        rxjs.operators.map((ev) => ev.clientX),
                        rxjs.operators.throttleTime(2000)
                    )

Lets a value pass, then ignores source values for the next duration milliseconds

Throttle Operator


        //emit value every 1 second
        const source$ = rxjs.interval(1000)
        //throttle for 2 seconds, emit latest value
        source$.pipe(rxjs.operators.throttle(val => rxjs.timer(2000)))

It's like throttleTime, but the silencing duration is determined by a second Observable

Distinct Operator


        rxjs.of(1, 1, 2, 2, 2, 1, 2, 3, 4, 3)
            .pipe(
                rxjs.operators.distinct() // 1, 2, 3, 4
            )

Distinct synchronous value marble diagram

Returns an Observable that emits all items emitted by the source Observable that are distinct by comparison from previous items


            interface Person {
                age: number,
                name: string
            }

            rxjs.of< Person >(
                { age: 4, name: 'Foo'},
                { age: 7, name: 'Bar'},
                { age: 5, name: 'Foo'})
                .pipe(rxjs.operators.distinct((p: Person) => p.name))
                .subscribe(x => console.log(x));

            // displays:
            // { age: 4, name: 'Foo' }
            // { age: 7, name: 'Bar' }

DistinctUntilChanged Operator


        rxjs.of(1, 1, 2, 2, 2, 1, 2, 3, 4, 3)
            .pipe(
                rxjs.operators.distinctUntilChanged() // 1, 2, 1, 2, 3, 4, 3
            )

DistinctUntilChanged synchronous value marble diagram

Returns an Observable that emits all items emitted by the source Observable that are distinct by comparison from the previous item

Take Operator


        rxjs.interval(1000)
            .pipe(
                rxjs.operators.take(5)
            )

Takes the first count values from the source, then completes

TakeLast Operator


        rxjs.range(1, 100)
            .pipe(
                rxjs.operators.takeLast(3)
            )

takeLast synchronous value marble diagram

Remembers the latest count values, then emits those only when the source completes

TakeUntil Operator


        rxjs.interval(1000)
            .pipe(
                rxjs.operators.takeUntil(rxjs.timer(5000))
            )

Lets values pass until a second Observable, notifier, emits something. Then, it completes

TakeWhile Operator


        rxjs.interval(1000)
            .pipe(
                rxjs.operators.takeWhile(value => value < 3)
            )

Takes values from the source only while they pass the condition given. When the first value does not satisfy, it completes

Other Filtering Operators

first([predicateFunction(), defaultValue]) here
last ([predicateFunction(), defaultValue]) here

skip(count) here
skipUntil(predicateObservable) here
skipWhile(predicateFunction) here

auditTime(periodNumber) here => when it sees a source values, it ignores that plus the next ones for duration milliseconds, and then it emits the most recent value from the source
audit(predicateObservable) here => it's like auditTime, but the silencing duration is determined by a second Observable
sample(predicateObservable) here => last emitted value
sampleTime(periodNumber) here => last emitted value at periodic time interval
Difference between audit & sample strategy: here

ignoreElements() here => ignores all items emitted by the source Observable and only passes calls of complete or error
single(predicateFunction) here => return value if one match otherwise (more value matched) error