SAP UI5 函数节流和异步完成令牌的应用
来自我的同事,SAP成都研究院的架构师Li Ben。
在SAP CRM Fiori App的早期开发过程中,关于live search功能上有一个问题,就是有时候发现live search返回的suggestion item并不完全匹配我们输入的search string, 比如正常情况输入abcde,应该匹配4个结果:
但是有时候输入abcde,会匹配更多的结果,发现里面有些item并不匹配abcde,他们只能匹配abcd:
问题分析
用户输入到abcd和abcde的时候,都向后台发出了请求查询匹配的结果,最后将结果显示到suggestion item中。
App请求的发送有先后顺序(先发abcd,再发abcde),但是响应处理是通过异步回调,这里不能保证处理返回结果的先后顺序跟请求发送的顺序一致,在用户输入较快,或者后台处理需要一定时间的情况下,有可能第二个请求(abcde)先于第一个请求(abcd)返回。造成的结果是用户最后的输入停留在abcde,而最后的返回结果是匹配的abcd(如上图)。
改进方案
方法1 - Throttle: 函数节流
Throttle又叫函数节流,目标是防止短时间内对一些昂贵的函数做出重复调用。
实现思想是在第一次调用函数的时候做一个定时器,同时设定一个threshold时间(函数的真正逻辑在定时器的threshold时间之后才被定时器执行),在该threshold之内,如果该函数没有被再次调用,就让定时器执行该函数的逻辑代码;如果threshold之内该函数被再次调用,取消上一次设定的定时器,重新生成一个新的定时器,让真正的逻辑重新被推迟到threshold时间之后执行。例子:
代码看上去还是很直观的。
Throttle - 函数节流的更多介绍:
http://wiki.jikexueyuan.com/project/brief-talk-js/function-throttling.html
方法2:Asynchronous Completion Token(ACT):
ACT最早是用来解决通信系统的多路信号的问题,就是不同的请求发出之后,接受响应的一端需要知道每个响应对应的原始请求是什么。我们live search的问题类似,我们需要知道匹配用户最后输入字符串的那个响应,本质上也是ACT问题的一种。
ACT实现思路简单讲,就是给每个请求和对应的响应分配一个唯一的token,响应返回的时候校验token,具体实现结合应用场景可能有所不同。
我在My Lead上为了验证ACT简单实现了一下:
(1) 定义两个变量缓存响应和用户的最终输入:
(2) 在change事件触发的方法里,让sLastInput保持跟用户的输入一致。
(3) 如果缓存的响应里面已经有了匹配的结果,不需要发出请求,直接从缓存取,这里我将用户最终输入的字符串作为validate token。
(4) 如果缓存里面没有匹配的结果才发出请求,在响应返回的callback里面,缓存结果并校验token:
ACT Pattern的更多介绍: http://www.cs.wustl.edu/~schmidt/PDF/ACT.pdf
这本书里也讲了ACT:
http://software-pattern.org/Book/29
比较一下Throttle和Async Completion Token:
要获取更多Jerry的原创文章,请关注公众号"汪子熙":
SAP UI5 函数节流和异步完成令牌的应用相关推荐
- SAP UI5函数节流(Throttle)的一个最简单的例子
SAP UI5源代码: <!DOCTYPE html> <html> <head><meta http-equiv="X-UA-Compatible ...
- Rxjs debounce 操作符在 SAP Spartacus 函数节流中的一个实际使用例子
在 window-ref.ts 的实现里,定义了一个每隔 300 毫秒,通过 fromEvent 发射一个 resize event 的Observable: /*** Returns an obse ...
- SAP UI5和Angular的函数防抖(Debounce)和函数节流(Throttle)实现原理介绍
这是Jerry 2021年的第 11 篇文章,也是汪子熙公众号总共第 282 篇原创文章. Jerry之前的文章 SAP UI5 OData谣言粉碎机:极短时间内发送两个Odata request, ...
- 使用函数节流思想避免 SAP UI5 应用里按钮短时间内被高频重复点击试读版
一套适合 SAP UI5 初学者循序渐进的学习教程 作者简介 Jerry Wang,2007 年从电子科技大学计算机专业硕士毕业后加入 SAP 成都研究院工作至今.Jerry 是 SAP 社区导师,S ...
- SAP UI5 数据绑定中的工厂函数
工厂函数是一种更强大的从模型数据创建控件的方法. 为控件聚合的每个条目调用工厂函数,开发人员可以决定每个条目是否应由具有不同属性的相同控件表示,甚至每个条目由完全不同的控件表示. 工厂函数带有参数sI ...
- 如何使用原生的 JavaScript 代码,触发 SAP UI5 按钮控件的点击事件处理函数
我的技术交流群里,有朋友提问: 我有个 UI5 按钮,想用原生 js 去触发 click 事件.在 dom 上检测到 click 已经触发了,但是按按钮的动作响应没有发生.请问如何解决,谢谢. 解决这 ...
- SAP UI5中的同步请求和异步请求
本文介绍SAP UI5中的同步请求和异步请求 Created by Wang, Jerry, last modified on Jul 04, 2016 要获取更多Jerry的原创文章,请关注公众号& ...
- SAP UI5 OData谣言粉碎机:极短时间内发送两个Odata request,前一个会自动被cancel掉吗
这是Jerry 2021年的第 9 篇文章,也是汪子熙公众号总共第 280 篇原创文章. 本文Jerry原本写于2016年5月,当时发布于团队内部wiki. 五年过后,Jerry使用的开发框架,从SA ...
- SAP UI5 初学者教程之四:XML 视图初探试读版
Jerry 从 2014 年加入 SAP成都研究院 CRM Fiori 开发团队之后开始接触 SAP UI5,曾经在 SAP 社区和"汪子熙"微信公众号上发表过多篇关于 SAP U ...
最新文章
- P2340 奶牛会展(状压dp)
- 全方位绕过软WAF攻略
- 教你解决ChartDirector Linux下中文乱码
- 零基础带你飞web前端教程带你探究web前端趋势
- git-底层-高层指令
- VS中,DEBUG/RELEASE的宏定义不同引起的问题
- 应用随机过程_《常见随机过程》(目录)
- 计算机怎么更改网络密码,该如何修改自家宽带帐号的密码?
- 第五代通信技术简单概述
- python读取组合惯导数据,并进行坐标转换到北东天、utm坐标系
- Laravel框架实现中英文双语站
- 摄像头 - 双摄像头工作原理详解:RBG +RGB, RGB + Mono
- LoadLibrary加载dll失败的问题
- Oracle Coherence 3.5 读书笔记之3 - 满足性能,可扩展和可用性目标
- 2021消防设施操作员(初级)岗位考试模拟题库应急疏散逃生知识部分
- win7用软激活后今天失效,解决办法
- 1602液晶显示摄氏度
- 机器学习(十一)机器学习系统设计
- CodeForces1214C
- 爆款营销打破空间局限,新商云提高门店坪效
热门文章
- 让Windows Live Messenger支持多账户登录
- GPS系统研发人员面试题(VC通讯)
- sklearn自学指南(part20)--收缩和协方差估计
- Django从理论到实战(part13)--include函数
- 小白的算法初识课堂(part1)--二分查找法
- 查看dataloader的大小_一文弄懂Pytorch的DataLoader, DataSet, Sampler之间的关系
- cent 8.0 安装tomcat 9.0_Tomcat部署及优化
- SAP UI5 货币金额显示的格式化逻辑
- SAP 电商云 Spartacus UI 产品搜索结果的设计明细
- 使用 Angular Transfer State 的一个具体例子