SAP 电商云 Spartacus UI ActiveCartService 的 isStable API 里的 EMPTY 操作符
isStable API 源代码如下:
return this.activeCartId$.pipe(
switchMap((cartId) => this.multiCartService.isStable(cartId)),
debounce((state) => (state ? timer(0) : EMPTY)),
distinctUntilChanged()
);
EMPTY 操作符:直接发送 complete
事件。
看一个简单的例子:
import { EMPTY } from 'rxjs';
EMPTY.subscribe({
next: () => console.log('Next'),
complete: () => console.log('Complete!'),
});
// Outputs
// Complete!
console.log('fire');
EMPTY.subscribe((value) => console.log('value: ', value));
我们永远不会在 console 里看到 Next
或者 value
的打印,因为 EMPTY 不 emit 任何数据,只有 complete 的 event.
这里引入 debounce 是为了避免 flicker spinner.
当数据加载非常快时,如果用户看到只有几分之一秒的 spinner 动画一闪而过,这是很不好的用户体验。
避免这个用户交互问题的方式之一,是引入 非闪烁加载器(Non-flicker loader)
.
这个 loader 需要满足的需求:
- 如果加载时间少于 1 秒——我们根本不会显示 loader;
- 如果加载时间超过一秒——我们开始显示加载器并在屏幕上保持
至少
1 秒。
例如,我们的数据加载需要 1.2 秒。 第1个 1 秒钟我们什么都不显示,1秒钟过后出现一个加载器。 又过了 0.2 秒后,我们收到数据,但我们将 spinner 在屏幕上再
保持 0.8 秒,此这个 spinner 不会出现闪烁现象。
实际代码:
readonly load$ = new Subject<void>();
readonly cancel$ = new Subject<void>();
readonly data$ = this.load$.pipe(
switchMapTo(nonFlickerLoader(this.dataService.load())),
map(value => value ?? 'Loading...'),
startWith('No data'),
takeUntil(this.cancel$),
repeat(),
);
这里我们有两个 triggering subject 来开始和取消加载。 假设我们的 nonFlickerLoader 在应该指示加载时发出 null,而在我们应该显示它的时间点,发出实际被加载的数据。 我们使用 repeat
操作符,所以我们可以多次触发它。
现在让我们继续编写 nonFlickerLoader 函数。 首先我们定义接口。 我们使用通用 <T>
因为我们不知道我们将获得的响应类型:
function nonFlickerLoader<T>(
data$: Observable<T>,
delay: number = 1000,
duration: number = 1000
): Observable<T | null> {
// ...
}
这个函数接受数据 Observable 和两个可选参数来表示我们在显示加载指示之前等待多长时间以及应该显示该 spinner 的最小持续时间。
函数具体的实现代码,首先创建一个 loading Observable:
const loading$ = timer(delay, duration).pipe(
map(i => !i),
takeWhile(Boolean, true),
startWith(false),
)
这个 $loading 是一个标志位,告诉我们 spinner 是否应该显示。
-
map 将除了第一个 emit 值 false 之外的所有值全部转换成 false.
-
takeWhile 只允许第一个 emit 值通过。
map 将除第一个之外的所有发射设置为 false。 takeWhile 用于仅在延迟时间到期后和持续时间过去后的第二次发射时让第一次发射通过。 请注意,我们使用第二个参数让布尔条件失败的假值在完成流之前通过。 我们还 startWith(false) 因为我们只想在给定延迟后显示加载指示。
注意 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秒之后发射整数1,然后每隔 2 秒发射一个递增的整数序列。
相关文章
- [SAA + SAP] 16. RDS
- 123. 使用 Busy Dialog 动画阻止 SAP UI5 应用按钮短时间内快速被点击
- 通过一个实际例子,理解 SAP UI5 sap.ui.model.odata.v2.ODataModel API 中 BindingContext 绑定上下文的概念和用法试读版
- SAP Fiori应用索引大全工具和 SAP Fiori Tools 的使用介绍
- 聊聊 SAP 产品 UI 上的消息显示机制
- 点击SAP Fiori Launchpad某个tile后遇到的错误消息如何解决
- when is this.oModel in sap-ui-core.js initialized for navigation working case
- SAP UI5 how the ui library theme parameter is loaded
- SAP 云平台上的 ABAP 编程环境里如何消费第三方服务
- SAP CRM WebClient UI和Hybris backoffice UI开发的相同点
- 两种在SAP Cloud Application Studio里通过编程对C4C UI字段赋值的方法
- 在SAP WebClient UI里使用AJAX进行异步数据读取
- SAP CRM WebClient UI如何将后台存储的timestamp时间戳转换成本地时间
- SAP附件UI里选择的文件是如何传到ABAP服务器的
- SAP note下载工具
- Jerry答网友提问:SAP CRM WebClient UI里的EXT,STRUCT等含义
- SAP 电商云 Spartacus UI 去除 Checkout 页面 header 和 footer 区域的几种方法介绍
- SAP 电商云 Spartacus UI 的交货模式 Delivery Mode 设计
- SAP 电商云 Spartacus UI 代码提交的 commit 信息规范
- SAP 电商云 Spartacus UI 从 CMS 取回 slots 和 component 之后的处理
- 如何自行找出 SAP Spartacus 查询用户信息的 API Service 类
- SAP Spartacus如何禁止某些标准的css样式
- SAP Cloud for Customer Sales Lead明细页面视图的UI模型
- SAP Hybris(Commerce)安装recipe包含的三个任务,setup, initialize和start
- SAP CRM中间件下载equipment时遇到的一个错误
- SAP CRM WebClient UI how to disable excel export
- 一个SAP S/4HANA CDS view extension的具体例子
- SAP CRM WebClient UI下拉菜单的Selenium实现
- SAP云平台CloudFoundry上部署了一个应用的技术明细
- SAP UI5 初学者教程之十二 - 使用 CSS 类对 UI 进行进一步美化试读版
- Constructor sap.ui.core.ComponentContainer has been called without new operator
- 一个具体的例子学习SAP S/4HANA里Fiori应用的排错分析
- SAP Fiori INTEROP tile cache
- SAP ABAP 服务器上OData Gateway 框架代码的单步调试
- 关于 SAP 电商云 Spartacus UI Transfer State 冗余 API 请求发送的讨论
- SAP 电商云 Spartacus UI SiteContextRoutesHandler 的技术实现明细介绍
- 关于 SAP 电商云 Spartacus UI checkout 流程的一些讨论
- SAP 电商云 Spartacus UI 如何在应用程序里捕捉到成功下单的事件