SAP 电商云 Spartacus UI ActiveCartService 的 isStable API 里的 debounce 和 timer 操作符

简介: SAP 电商云 Spartacus UI ActiveCartService 的 isStable API 里的 debounce 和 timer 操作符

这个 isStable API 的实现是 switchMapdebounce[timer](https://www.learnrxjs.io/learn-rxjs/operators/creation/timer) 等操作符的组合。

image.png

首先看 timer 的例子:

// RxJS v6+
import { timer } from 'rxjs';
//emit 0 after 1 second then complete, since no second argument is supplied
// timer 调用返回一个 Observable,它订阅后在1秒钟后 emit 一个整数 0,
const source = timer(1000);
//output: 0
const subscribe = source.subscribe(val => console.log(val));

从 console 输出看,确实是订阅后一秒,发射整数 0:

image.png

timer 的第二个参数为时间间隔,下面的例子:

// RxJS v6+
import { timer } from 'rxjs';
/*
  timer takes a second argument, how often to emit subsequent values
  in this case we will emit first value after 1 second and subsequent
  values every 2 seconds after
*/
const source = timer(1000, 2000);
//output: 0,1,2,3,4,5......
const subscribe = source.subscribe(val => console.log(val));

从输出能够看出,1秒后发射整数0,然后每隔两秒,发射一个递增的整数:

image.png

再看 debounce:

Discard emitted values that take less than the specified time, based on selector function, between output.

如果在 selector function 指定的时间间隔内 emit 出的数据,将会被丢弃。

debounce 也返回一个新的 Observable,接收一个函数作为输入参数。

debounce(durationSelector: function): Observable

下面的代码只会在控制台上看到 of 参数里最后一个元素被打印出来:

// RxJS v6+
import { of, timer } from 'rxjs';
import { debounce } from 'rxjs/operators';
//emit four strings
const example = of('WAIT', 'ONE', 'SECOND', 'Last will display');
/*
    Only emit values after a second has passed between the last emission,
    throw away all other values
*/
const debouncedExample = example.pipe(debounce(() => timer(1000)));
/*
    In this example, all values but the last will be omitted
    output: 'Last will display'
*/
const subscribe = debouncedExample.subscribe(val => console.log(val));

image.png

下列代码:

// RxJS v6+
import { interval, timer } from 'rxjs';
import { debounce } from 'rxjs/operators';
//emit value every 1 second, ex. 0...1...2
const interval$ = interval(1000);
//raise the debounce time by 200ms each second
const debouncedInterval = interval$.pipe(debounce(val => timer(val * 200)));
/*
  After 5 seconds, debounce time will be greater than interval time,
  all future values will be thrown away
  output: 0...1...2...3...4......(debounce time over 1s, no values emitted)
*/
const subscribe = debouncedInterval.subscribe(val =>
  console.log(`Example Two: ${val}`)
);

输出:

image.png

首先,第 6 行的 interval(1000),订阅之后,每隔1秒会产生一个递增的整数值。

这个整数值,通过 pipe 流入到第 8 行的 debounce 操作符。如果一个数据是在 debounce 输入参数 value 代表的时间间隔之内 emit 的,则该数据会被丢弃,这就是 debounce Operator 所起的作用。


每隔1秒产生的整数,进入到 debounce 操作符内,debounce 监控的时间间隔通过函数 (val) => timer(val * 200 ) 函数指定,因此 debounce 监控的时间间隔依次为 200,400,600,800,1000毫秒,以此类推。当 1200 毫秒之后,interval 每隔 1 秒产生的数值,因为 1 秒的时间间隔已经落在了 debounce 从 1200 毫秒开始的时间间隔内,所以从 5 开始的整数会全部被 debounce 操作符丢弃掉。


目录
相关文章
|
6月前
|
前端开发 测试技术 API
UI自动化与API自动化已经开始互斥了吗?
UI自动化与API自动化已经开始互斥了吗?
|
5月前
|
API Android开发 开发者
`RecyclerView`是Android API 21引入的UI组件,用于替代ListView和GridView
【6月更文挑战第26天】`RecyclerView`是Android API 21引入的UI组件,用于替代ListView和GridView。它提供高效的数据视图复用,优化的布局管理,支持多种布局(如线性、网格),并解耦数据、适配器和视图。RecyclerView的灵活性、性能(如局部刷新和动画支持)和扩展性使其成为现代Android开发的首选,特别是在处理大规模数据集时。
61 2
|
安全 关系型数据库 API
docker方式安装konga图形化admin api UI
docker方式安装konga图形化admin api UI
196 0
|
Java API Maven
探索Knife4j Spring UI:优雅的API文档生成工具
在现代的应用开发中,API(Application Programming Interface)文档是团队合作和项目维护的关键。然而,编写和维护API文档可能是一个繁琐的任务。Knife4j Spring UI作为一款优雅的API文档生成工具,为我们提供了一种简单和高效的方式来生成易于阅读和测试的API文档。本文将深入探讨Knife4j Spring UI的基本概念、特点,以及如何在实际应用中使用它进行API文档管理和测试。
379 0
|
存储 JSON JavaScript
SAP ABAP MIME Repository 和 API 介绍试读版
SAP ABAP MIME Repository 和 API 介绍试读版
106 0
SAP ABAP MIME Repository 和 API 介绍试读版
|
前端开发 UED 开发者
SAP Spartacus 开源项目中 $skipComponentStyles 的作用介绍
SAP Spartacus 开源项目中 $skipComponentStyles 的作用介绍
185 0
|
存储 SQL API
SAP CRM 系统使用 API 和 open sql 读取订单长文本的两种方式比较
SAP CRM 系统使用 API 和 open sql 读取订单长文本的两种方式比较
|
安全 网络安全
SAP CRM WebClient UI 支持的一些 url 参数
SAP CRM WebClient UI 支持的一些 url 参数
|
JavaScript API
让 Spartacus 服务器端渲染引入 long API 调用超时机制的两种配置方法
让 Spartacus 服务器端渲染引入 long API 调用超时机制的两种配置方法
|
XML 数据格式 容器
一个真实的 SAP 标准 UI5 应用的扩展开发项目(Extension Project)分享 - UI5 界面上新增订单创建者字段(2)
一个真实的 SAP 标准 UI5 应用的扩展开发项目(Extension Project)分享 - UI5 界面上新增订单创建者字段
138 0