Rxjs debounce 運算子在 SAP Spartacus 函式節流中的一個實際使用例子

i042416發表於2021-04-19

在 window-ref.ts 的實現裡，定義了一個每隔 300 毫秒，透過 fromEvent 發射一個 resize event 的Observable：

![](https://img-blog.csdnimg.cn/img_convert/2b22166d69e633b7e5c6f4494c855c7d.png)

```typescript
/**
   * Returns an observable for the window resize event and emits an event
   * every 300ms in case of resizing. An event is simulated initially.
   *
   * If there's no window object available (i.e. in SSR), a null value is emitted.
   */
  get resize$(): Observable<any> {
    if (!this.nativeWindow) {
      return of(null);
    } else {
      return fromEvent(this.nativeWindow, 'resize').pipe(
        debounceTime(300),
        startWith({ target: this.nativeWindow }),
        distinctUntilChanged()
      );
    }
  }
```

加上 distingctUntilChanged 運算子後，能過濾掉完全一致的 resize event. 下面的例子，展示瞭如何使用 distingctUntilChanged，將數字序列裡重複的數字過濾掉。distingctUntilChanged 預設會將當前元素和前一元素做比較。

```typescript
import { of } from 'rxjs';
import { distinctUntilChanged } from 'rxjs/operators';

of(1, 1, 2, 2, 2, 1, 1, 2, 3, 3, 4).pipe(
    distinctUntilChanged(),
  )
  .subscribe(x => console.log(x)); // 1, 2, 1, 2, 3, 4
```

下列例子展示瞭如何將自定義的比較邏輯，透過箭頭函式作為引數，傳入 distinctUntilChanged 裡。

```typescript
import { of } from 'rxjs';
import { distinctUntilChanged } from 'rxjs/operators';

interface Person {
   age: number,
   name: string
}

of<person>(
    { age: 4, name: 'Foo'},
    { age: 7, name: 'Bar'},
    { age: 5, name: 'Foo'},
    { age: 6, name: 'Foo'},
  ).pipe(
    distinctUntilChanged((p: Person, q: Person) => p.name === q.name),
  )
  .subscribe(x => console.log(x));

// displays:
// { age: 4, name: 'Foo' }
// { age: 7, name: 'Bar' }
// { age: 5, name: 'Foo' }
```</person></any>

來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/24475491/viewspace-2768671/，如需轉載，請註明出處，否則將追究法律責任。

RxJs 運算子 withLatestFrom 在 SAP 電商雲 Spartacus UI 中的應用
2022-02-15
JSUI
SAP Spartacus SSR 中的 shimming 實現的一個例子
2022-10-15
函式防抖debounce與節流throttle
2019-04-01
函式
SAP 電商雲 Spartacus UI Proxy Facade 的一個實際例子
2021-11-17
UI
SAP UI5和Angular的函式防抖(Debounce)和函式節流(Throttle)實現原理介紹
2021-01-29
UIAngular函式
從一個實際的例子觸發，理解什麼是 Rxjs 的 defer 函式
2021-11-21
JS函式
js函式防抖debounce和節流throttle
2019-05-05
JS函式
函式節流throttle和debounce程式碼演示
2018-02-03
函式
[JS效能優化]函式去抖(debounce)與函式節流(throttle)
2019-03-04
JS優化函式
關於js節流函式throttle和防抖動debounce
2019-02-16
JS函式
SAP Spartacus SplitViewComponent Migration 的一個具體例子
2021-05-09
View
requestAnimationFrame實現一幀的函式節流
2018-08-05
requestAnimationFrame函式
RxJs 操作符 withLatestFrom 在 SAP 電商雲 Spartacus UI 中的應用
2022-02-15
JSUI
理解Underscore中的節流函式
2019-03-04
函式
RxJS Observable：一個奇特的函式
2017-09-27
JS函式
談談JS中的函式節流
2016-11-09
JS函式
函式節流
2015-04-23
函式
使用SAP Cloud Application Programming模型開發OData的一個實際例子
2019-11-23
CloudAPP模型
基於 SAP Spartacus 的 SAP 電商雲 SEO 搜尋引擎優化的一個例子
2021-08-07
優化
前端RxJs響應式程式設計之運算子實踐
2021-09-09
前端JS程式設計
JavaScript中函式防抖、節流
2021-03-26
JavaScript函式
javascript中&&運算子和||運算子的使用
2019-06-30
JavaScript
SAP 電商雲 Spartacus UI 的響應式 UI 實現細節
2022-01-09
UI
js函式中的節流和防抖
2018-12-18
JS函式
JavaScript 中函式節流和函式去抖的講解
2017-04-17
JavaScript函式
vue在一個函式中呼叫另外一個函式
2019-02-21
Vue函式
js中在一個函式中引用另一個函式中的函式，可以這麼做
2018-07-11
JS函式
函式節流、函式防抖實現原理分析
2017-02-21
函式
RxJS CombineLatest operator 的一個具體使用例子
2021-06-16
JS
一個實際的例子學習 SAP BTP Java 應用的 @Before 註解使用方式
2022-03-12
Java
1：賦值運算子函式
2020-12-02
賦值函式
函式節流與函式防抖
2020-07-21
函式
函式防抖和函式節流
2019-01-26
函式
一圖秒懂函式防抖和函式節流
2019-01-25
函式
一個閉包函式的簡單例子
2011-07-13
函式單例
Rxjs TakeUntil 運算子的學習筆記
2022-05-21
JS筆記
在實際例子中學習正規表示式(高效率)
2022-03-20
MySQL 日期函式、時間函式在實際場景中的應用
2023-01-23
MySql函式

Rxjs debounce 運算子在 SAP Spartacus 函式節流中的一個實際使用例子

相關文章