RxJS Use Case

统计页面点击次数

注意，RxJS中的scan相当于JavaScript中的Array.prototype.reduce，下面的例子展示了如何统计页面点击次数。

const { fromEvent, scan } = rxjs;
fromEvent(document, "click")
  .pipe(scan((count) => count + 1, 0))
  .subscribe((count) => console.log(count));

节流

Resize窗口

resize时间触发非常频繁，我们可以使用throttleTime来节流，下面的例子展示了如何节流resize事件。

const { fromEvent, throttleTime } = rxjs;
fromEvent(window, "resize")
  .pipe(throttleTime(500))
  .subscribe(() => {
    console.log(`window width: ${window.innerWidth}`);
    console.log(`window height: ${window.innerHeight}`);
  });

统计点击次数

throttleTime可以用来实现节流，下面的例子展示了如何实现节流，无论用户点击的有多快，我们都是每隔1秒统计一次点击次数。

const { fromEvent, throttleTime, scan } = rxjs;
fromEvent(document, "click")
  .pipe(
    throttleTime(1000),
    scan((count) => count + 1, 0)
  )
  .subscribe((count) => console.log(count));

设置最大并发请求数

mergeMap with concurrency参数可以设置最大并发请求数，下面的例子展示了如何设置最大并发请求数。

import { interval, mergeMap, of } from 'rxjs';

const source = interval(1000);
source.pipe(mergeMap(() => of('request'), 2)).subscribe(console.log);

避免重复请求

使用switchMap可以避免重复请求，下面的例子展示了如何避免重复请求。

忽略某个值

使用skip，以下代码忽略了interval的前两个值，然后取3个值。所以忽略0和1，取2, 3, 4。关于interval的详细信息，请看这里

1
2
3

import { interval, skip, take } from 'rxjs';

interval(1000).pipe(skip(2), take(3)).subscribe(console.log); // 2, 3, 4

Philip

rxjs-use-case