rxjs ThrottleTime 和 debounceTime

• throttleTime 的作⽤是限制在 duration 时间范围内，从上游传递给下游数据的个数；
• debounceTime 的作⽤是让传递给下游的数据间隔不能⼩于给定的时间 dueTime。

一旦把下列代码拷贝到 StackBlitz 里，就报错：

import { interval, throttleTime } from 'rxjs';
import 'rxjs/add/observable/interval';
import 'rxjs/add/operator/throttleTime';

const source$ = interval(1000);
const result$ = source$.pipe(throttleTime(2000));
result$.subscribe((data) => console.log(data));

罪魁祸首就是这两行代码：

删除之后问题消失：

代码：

import { interval, throttleTime } from 'rxjs';

const source$ = interval(1000);
const result$ = source$.pipe(throttleTime(2000));
result$.subscribe((data) => console.log(data));

测试结果如下：

效果：至少在大于等于 2 的时间间隔内，只有1个数据发送到下游 Observable.

如果把上述代码改成 debounceTime：则没有任何输出：

import { debounceTime, interval, throttleTime } from 'rxjs';

const source$ = interval(1000);
const result$ = source$.pipe(debounceTime(2000));
result$.subscribe((data) => console.log(data));

因为 debounceTime 要等上游在 2 毫秒范围内不产⽣任何其他数据时才把这个数据传递给下游，但我们这个例子的实际情况是，每一秒钟上游都会产⽣新的数据，那么debounceTime 就又要重新开始计时。

除非把 interval 的时间间隔改成 大于 debounceTime 的参数，才能看到输出。

这里还能观察到一个重新生成整数序列的行为：

或者使用如下代码，还是每秒产生1个整数，但是加了一个 filter 操作：

import { debounceTime, filter, interval, throttleTime } from 'rxjs';

// filter((x) => x % 3 === 0)
const source$ = interval(1000);
const result$ = source$.pipe(
  filter((x) => x % 3 === 0),
  debounceTime(2000)
);
result$.subscribe((data) => console.log(data));

测试结果：

下列代码的功能：一秒钟之内，只允许用户点击一次按钮：

const click$ = Rx.Observerable.fromEvent(addToCartButton, "click");
click$.throttleTime(1000).subscribe(addToCardHandler);

用户滚动网页停止超过 200 毫秒后，才触发 scrollHandler：

const scroll$ = Rx.Observerable.fromEvent(window, "scroll");
scroll$.debounceTime(200).subscribe(scrollHandler);

更多Jerry的原创文章，尽在："汪子熙":