SAP 电商云 Spartacus UI ActiveCartService 的 isStable API 里的 debounce 和 timer 操作符

2022-04-15 23:34:34 阅读：198 来源： 互联网

标签：ActiveCartService isStable const val debounce timer subscribe 电商 emit

这个 isStable API 的实现是 switchMap 和 debounce，[timer](https://www.learnrxjs.io/learn-rxjs/operators/creation/timer) 等操作符的组合。

首先看 timer 的例子：

// 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));

从 console 输出看，确实是订阅后一秒，发射整数 0：

timer 的第二个参数为时间间隔，下面的例子：

// 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));

从输出能够看出，1秒后发射整数0，然后每隔两秒，发射一个递增的整数：

再看 debounce:

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

如果在 selector function 指定的时间间隔内 emit 出的数据，将会被丢弃。

debounce 也返回一个新的 Observable，接收一个函数作为输入参数。

debounce(durationSelector: function): Observable

下面的代码只会在控制台上看到 of 参数里最后一个元素被打印出来：

// 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));

下列代码：

// 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}`)
);

输出：

首先，第 6 行的 interval(1000)，订阅之后，每隔1秒会产生一个递增的整数值。

这个整数值，通过 pipe 流入到第 8 行的 debounce 操作符。如果一个数据是在 debounce 输入参数 value 代表的时间间隔之内 emit 的，则该数据会被丢弃，这就是 debounce Operator 所起的作用。

每隔1秒产生的整数，进入到 debounce 操作符内，debounce 监控的时间间隔通过函数 (val) => timer(val * 200 ) 函数指定，因此 debounce 监控的时间间隔依次为 200，400，600，800，1000毫秒，以此类推。当 1200 毫秒之后，interval 每隔 1 秒产生的数值，因为 1 秒的时间间隔已经落在了 debounce 从 1200 毫秒开始的时间间隔内，所以从 5 开始的整数会全部被 debounce 操作符丢弃掉。

标签：ActiveCartService,isStable,const,val,debounce,timer,subscribe,电商,emit
来源： https://www.cnblogs.com/sap-jerry/p/16151470.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

SAP 电商云 Spartacus UI ActiveCartService 的 isStable API 里的 debounce 和 timer 操作符