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.ui.layout.Grid 控件概述
- SAP Commerce Cloud ASM 模块的登录过程
- SAP UI5 应用中的 sap.ui.require 使用场景
- SAP UI5 sap.ui.Device.media.RANGESETS 的使用介绍
- SAP UI5 sap.ui.Device.media 公有方法介绍
- SAP Web IDE环境搭建 – 详细指导
- 报告分享|中国信通院云大所与思爱普 SAP:2022年新型中国企业的智慧管理平台研究报告
- 关于 Fiori 应用里 SAP UI5 前端开发和 SEGW 后台 OData 服务开发的工作量比值问题
- SAP UI5 应用 FlexBox 控件 growFactor 的使用方法
- SAP UI5 应用的标准 Theme 和自定义 Theme 的加载讨论
- SAP MM 创建公司间退货STO,系统报错- No delivery type for returns processing assigned to item
- 关于 SAP UI5 应用 render2 实例异步创建的编码实现
- SAP Fiori 应用 url 中的 DraftUUID 参数的含义
- SAP 常用表详解编程语言
- SAP打印机配置详解编程语言
- SAP 自开发程序显示多条消息详解编程语言
- SAP STO 退货业务的后台配置说明详解编程语言
- SAP中CK11N成本估算的取价逻辑详解编程语言
- SAP修改已经释放了的请求号详解编程语言
- 转变Oracle SAP实施转变:新的商业革命(oraclesap实施)
- 「Linux与SAP:企业级软件的完美结合」(linuxsap)
- 对比SAP VS Oracle: 哪个更适合你?(sap与oracle)
- 聘请高级Oracle与SAP顾问,拓展业务潜力(oracle sap顾问)
- 使用Oracle与SAP进行数据接口开发(oracle sap接口)