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 操作符丢弃掉。


目录
相关文章
|
24天前
|
JSON 数据挖掘 API
各大电商平台的商品详情数据接口(API接口系列)
各大电商平台的商品详情数据接口(API接口系列)是开发者在构建电商应用或进行数据分析时的重要工具。这些接口允许开发者通过编程方式获取商品的详细信息,如商品ID、标题、价格、库存、属性、描述、图片等。以下是对淘宝、京东、拼多多等电商平台商品详情数据接口的汇总,以及开发者在使用这些接口时需要注意的事项。
各大电商平台的商品详情数据接口(API接口系列)
|
22天前
|
Java API Spring
打造未来电商新引擎:揭秘Java可扩展API设计,让支付与物流灵活如丝,引领电商时代潮流!
【8月更文挑战第30天】本文通过电商平台案例,探讨了如何设计可扩展的Java API。首先定义支付和物流服务的接口与抽象类,然后实现具体服务,接着引入工厂模式或依赖注入管理服务实例,最后通过配置实现灵活扩展。这种设计确保了应用架构的灵活性和长期稳定性。
38 3
|
3月前
|
监控 供应链 搜索推荐
数据驱动电商:深度利用淘宝API接口掌握商品详情
本文探讨了如何利用淘宝API接口获取商品详情数据以助力电商决策。通过API,商家能获取商品标题、价格、库存等信息,从而进行市场分析、库存优化、定价策略制定及个性化推荐。步骤包括注册获取API权限、理解文档、构建数据收集流程、处理分析数据以及应用结果。示例代码展示了如何用Python调用API获取商品详情。善用API和数据驱动策略可在电商市场中取得优势。请注意遵循淘宝的API使用规范。
|
18天前
|
测试技术 API 数据库
电商API接口定制与开发系列之——商品详情接口介绍
——在成长的路上,我们都是同行者。这篇关于API接口的文章,希望能帮助到您。期待与您继续分享更多API接口的知识,请记得关注Anzexi58哦! 在电商API接口定制与开发系列中,商品详情接口是至关重要的一部分,它直接关系到用户浏览商品、获取商品信息的关键环节。以下是对商品详情接口的详细介绍:
|
1月前
|
XML 存储 API
电商商品详情页面的获取,详情图属性sku价格的采集,API接口系列
在电商平台上,商品详情页面的获取,包括详情图、属性、SKU(Stock Keeping Unit,库存量单位)、价格等信息的采集,通常可以通过多种方式实现,其中之一是利用电商平台提供的API接口。以下是一个基于通用流程的概述,用于说明如何通过API接口系列来采集这些信息。
|
1月前
|
数据采集 存储 安全
在电商API采集过程中违反数据隐私和合规性规定如何避免?
为确保电商API数据采集合规与安全,需遵循多项措施:熟悉GDPR等法规;遵守API条款;最小化数据收集;匿名化处理;获用户同意;应用数据加密;实行访问控制;定期安全审计;设定数据保留政策;响应数据主体请求;记录处理活动;建立泄露应对计划;加强员工培训;审查合作伙伴合规性;必要时咨询法律意见。这些步骤有助于降低违规风险。
|
21天前
|
Java 数据库连接 缓存
Hibernate性能调优:五大秘籍,让应用效能飙升,告别慢如蜗牛的加载,体验丝滑般流畅!
【8月更文挑战第31天】本文深入探讨了提升Hibernate应用性能的五大技巧,包括选择合适的缓存策略、优化查询语句、合理使用Eager与Lazy加载、批量操作与事务管理以及利用索引和数据库优化。通过正确配置多级缓存、分页查询、延迟加载、批量处理及合理创建索引,能够显著提高应用响应速度与吞吐量,改善用户体验。这些技巧需根据具体应用场景灵活调整,以实现最佳性能优化效果。
51 0
|
23天前
|
存储 数据采集 API
提升店铺好评秘籍:淘宝商品评论接口与电商 API 接口的深度解析
该接口名为item_review,用于获取淘宝商品评论信息,支持HTTP GET或POST请求,体验API为c0b.cc/R4rbK2。主要请求参数包括商品ID(num_iid)、排序方式(sort)、页码(page)。响应参数涵盖评论内容(rate_content)、评论日期(rate_date)、评论图片(pics)、买家昵称(display_user_nick)、商品属性(auction_sku)
|
1月前
|
缓存 测试技术 API
电商平台 API 接入技术要点深度剖析
这段内容详述了电商API接入的关键步骤:首先,深入了解API文档以明确功能权限及数据格式;其次,选择恰当的接入方式如RESTful API或RPC;接着实施身份验证与授权保障数据安全;处理数据传输与异常情况;利用缓存和并发提升性能;采用加密手段和限流策略加强安全防护;持续监控API状态并记录日志;最后,通过充分测试确保稳定性和进行版本管理以适应API迭代。
|
3月前
|
API Android开发 开发者
`RecyclerView`是Android API 21引入的UI组件,用于替代ListView和GridView
【6月更文挑战第26天】`RecyclerView`是Android API 21引入的UI组件,用于替代ListView和GridView。它提供高效的数据视图复用,优化的布局管理,支持多种布局(如线性、网格),并解耦数据、适配器和视图。RecyclerView的灵活性、性能(如局部刷新和动画支持)和扩展性使其成为现代Android开发的首选,特别是在处理大规模数据集时。
45 2