• 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的原創文章，盡在：“汪子熙”:

總結

以上是生活随笔為你收集整理的rxjs ThrottleTime 和 debounceTime 的操作符区别的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。