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