The debounce and timer operators in the isStable API of SAP E-commerce Cloud ActiveCartService

The implementation of this isStable API is a combination of switchMap and debounce , [timer](https://www.learnrxjs.io/learn-rxjs/operators/creation/timer) and other operators.

First look at the timer example:

 // RxJS v6+
import { timer } from 'rxjs';

//emit 0 after 1 second then complete, since no second argument is supplied
// timer 调用返回一个 Observable，它订阅后在1秒钟后 emit 一个整数 0，
const source = timer(1000);
//output: 0
const subscribe = source.subscribe(val => console.log(val));

From the console output, it is indeed one second after the subscription, the integer 0 is emitted:

The second parameter of timer is the time interval, the following example:

 // RxJS v6+
import { timer } from 'rxjs';

/*
  timer takes a second argument, how often to emit subsequent values
  in this case we will emit first value after 1 second and subsequent
  values every 2 seconds after
*/
const source = timer(1000, 2000);
//output: 0,1,2,3,4,5......
const subscribe = source.subscribe(val => console.log(val));

As can be seen from the output, the integer 0 is emitted after 1 second, and then every two seconds, an incrementing integer is emitted:

Look at debounce again:

Discard emitted values that take less than the specified time, based on selector function, between output.

If the data is emitted within the time interval specified by the selector function, it will be discarded.

debounce also returns a new Observable that takes a function as an input parameter.

debounce(durationSelector: function): Observable

The following code will only see the last element of the of parameter printed on the console:

 // RxJS v6+
import { of, timer } from 'rxjs';
import { debounce } from 'rxjs/operators';

//emit four strings
const example = of('WAIT', 'ONE', 'SECOND', 'Last will display');
/*
    Only emit values after a second has passed between the last emission,
    throw away all other values
*/
const debouncedExample = example.pipe(debounce(() => timer(1000)));
/*
    In this example, all values but the last will be omitted
    output: 'Last will display'
*/
const subscribe = debouncedExample.subscribe(val => console.log(val));

The following code:

 // RxJS v6+
import { interval, timer } from 'rxjs';
import { debounce } from 'rxjs/operators';

//emit value every 1 second, ex. 0...1...2
const interval$ = interval(1000);
//raise the debounce time by 200ms each second
const debouncedInterval = interval$.pipe(debounce(val => timer(val * 200)));
/*
  After 5 seconds, debounce time will be greater than interval time,
  all future values will be thrown away
  output: 0...1...2...3...4......(debounce time over 1s, no values emitted)
*/
const subscribe = debouncedInterval.subscribe(val =>
  console.log(`Example Two: ${val}`)
);

output:

First, the interval(1000) in line 6, after subscription, will generate an incrementing integer value every 1 second.

This integer value is piped into the debounce operator on line 8. If a data is emitted within the time interval represented by the debounce input parameter value , the data will be discarded, which is what the debounce Operator does.

The integer generated every 1 second enters the debounce operator, and the time interval for debounce monitoring is specified by the function (val) => timer(val * 200 ), so the time interval for debounce monitoring is 200, 400, 600, 800, 1000 milliseconds, and so on. After 1200 milliseconds, the value of interval is generated every 1 second, because the 1-second interval has fallen within the time interval of debounce starting from 1200 milliseconds, so the integers starting from 5 will all be discarded by the debounce operator.