Rxjs debounce 操作符在 SAP Spartacus 函数节流中的一个实际使用例子

在 window-ref.ts 的实现里，定义了一个每隔 300 毫秒，通过 fromEvent 发射一个 resize event 的Observable：

/*** 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 默认会将当前元素和前一元素做比较。

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 里。

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' }

Rxjs debounce 操作符在 SAP Spartacus 函数节流中的一个实际使用例子相关推荐

SAP UI5函数节流(Throttle)的一个最简单的例子
SAP UI5源代码: <!DOCTYPE html> <html> <head><meta http-equiv="X-UA-Compatible ...
Angular 事件绑定语法在 SAP Spartacus Popover Component 中的一个应用
要绑定到事件,请使用 Angular 的事件绑定语法.此语法由等号左侧括号内的目标事件名和右侧引号内的模板语句组成.在下面的示例中,目标事件名是 click ,模板语句是 onSave() . < ...
SAP UI5 函数节流和异步完成令牌的应用
来自我的同事,SAP成都研究院的架构师Li Ben. 在SAP CRM Fiori App的早期开发过程中,关于live search功能上有一个问题,就是有时候发现live search返回的sug ...
SAP Spartacus 用户请求中的 current id 是从哪里来的
从 SAP Spartacus 成功登录之后,能在 Local Storage 里观察到 userId 为 current: 这个 current id 从哪里来的呢?在 Spartacus 应用初始 ...
Subject 在 SAP Spartacus Popover Component 中的应用
Subject 是 Rxjs 里的一个工具对象. Subject 是一种特殊类型的 Observable,它允许将值多播到许多观察者. Subject 就像 EventEmitters. 每个 Sub ...
SAP Spartacus里使用defer的一个例子
先看一个最简单的例子: import { defer, Observable, of } from 'rxjs';const observableFactory = () => {console ...
SAP Spartacus breakpoint服务中platformID的注入逻辑
@Inject(PLATFORM_ID) protected platform: any 这个PLATFORM_ID来自@angular/core: 在platform-browser.js里能查看到 ...
SAP Spartacus angular.json 中定义的 serve-ssr
直接不带参数运行 ng run: An unhandled exception occurred: Cannot determine project or target for command. Se ...
SAP Spartacus单元测试用例中Component构造函数的调用上下文
我有一个Angular Component,构造函数的两个参数通过依赖注入指定. 在单元测试时候,观察这两个参数如何被注入的.在构造函数被调用之前,先执行实例的初始化逻辑: 观察此时的this: 最后 ...

Rxjs debounce 操作符在 SAP Spartacus 函数节流中的一个实际使用例子

Rxjs debounce 操作符在 SAP Spartacus 函数节流中的一个实际使用例子相关推荐

最新文章

热门文章