IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> SAP 电商云 Spartacus UI ActiveCartService 的 isStable API 里的 EMPTY 操作符 -> 正文阅读

[JavaScript知识库]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. 如果加载时间少于 1 秒——我们根本不会显示 loader;
  2. 如果加载时间超过一秒——我们开始显示加载器并在屏幕上保持至少 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 秒发射一个递增的整数序列。

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2022-05-10 11:48:02  更:2022-05-10 11:51:22 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/23 20:15:25-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码