[RxJS] Filtering operators: distinct and distinctUntilChanged

Operator distinct() and its variants are an important type of Filtering operator. This lessons shows how they work and in what cases are they useful.

distinctUntilChanged():

var foo = Rx.Observable.interval(500).take(5)
.zip(Rx.Observable.of('a','b','a','a','b'), (x,y)=>y);

/*
--a--b--a--a--b|
distinctUntilChanged
--a--b--a-----b|
*/

var result = foo.distinctUntilChanged();

result.subscribe(
function (x) { console.log('next ' + x); },
function (err) { console.log('error ' + err); },
function () { console.log('done'); },
);

distinct(comparFn, flushFn):

var foo = Rx.Observable.interval(500).take(5)
.zip(Rx.Observable.of('a','b','a','a','b'), (x,y)=>y);

/*
--a--b--a--a--b|
distinct
--a--b---------|
*/

var result = foo.distinct();

result.subscribe(
function (x) { console.log('next ' + x); },
function (err) { console.log('error ' + err); },
function () { console.log('done'); },
);

/*
"next a"
"next b"
"done"
*/

With CamperFn():

var foo = Rx.Observable.interval(500).take(5)
.zip(Rx.Observable.of('a','b','a','A','b'), (x,y)=>y);

var comparFn = (x, y) => {
return x.toLowerCase() === y.toLowerCase();
}

/*
--a--b--a--A--b|
distinct
--a--b---------|
*/

var result = foo.distinct(comparFn);

result.subscribe(
function (x) { console.log('next ' + x); },
function (err) { console.log('error ' + err); },
function () { console.log('done'); },
);

/*
"next a"
"next b"
"done"
*/

with FlusherFn:

var foo = Rx.Observable.interval(500).take(5)
.zip(Rx.Observable.of('a','b','a','A','b'), (x,y)=>y);

var comparFn = (x, y) => {
return x.toLowerCase() === y.toLowerCase();
}

var flushFn = Rx.Observable.interval(1100).take(1)
.concat(Rx.Observable.never());

/*
--a--b--a--A--b|
-------0--------
distinct(comparFn, flushFn)
--a--b--a-----b|
*/

var result = foo.distinct(comparFn, flushFn);

result.subscribe(
function (x) { console.log('next ' + x); },
function (err) { console.log('error ' + err); },
function () { console.log('done'); },
);

/*
"next a"
"next b"
"next a"
"next b"
"done"
*/