SAP UI5 函数节流和异步完成令牌的应用

简介: 来自我的同事,SAP成都研究院的架构师Li Ben。在SAP CRM Fiori App的早期开发过程中,关于live search功能上有一个问题,就是有时候发现live search返回的suggestion item并不完全匹配我们输入的search string, 比如正常情况输入abcde,应该匹配4个结果:

来自我的同事,SAP成都研究院的架构师Li Ben。


在SAP CRM Fiori App的早期开发过程中,关于live search功能上有一个问题,就是有时候发现live search返回的suggestion item并不完全匹配我们输入的search string, 比如正常情况输入abcde,应该匹配4个结果:

image.png

但是有时候输入abcde,会匹配更多的结果,发现里面有些item并不匹配abcde,他们只能匹配abcd:

image.png

问题分析

用户输入到abcd和abcde的时候,都向后台发出了请求查询匹配的结果,最后将结果显示到suggestion item中。

App请求的发送有先后顺序(先发abcd,再发abcde),但是响应处理是通过异步回调,这里不能保证处理返回结果的先后顺序跟请求发送的顺序一致,在用户输入较快,或者后台处理需要一定时间的情况下,有可能第二个请求(abcde)先于第一个请求(abcd)返回。造成的结果是用户最后的输入停留在abcde,而最后的返回结果是匹配的abcd(如上图)。

改进方案

方法1 - Throttle: 函数节流

Throttle又叫函数节流,目标是防止短时间内对一些昂贵的函数做出重复调用。

实现思想是在第一次调用函数的时候做一个定时器,同时设定一个threshold时间(函数的真正逻辑在定时器的threshold时间之后才被定时器执行),在该threshold之内,如果该函数没有被再次调用,就让定时器执行该函数的逻辑代码;如果threshold之内该函数被再次调用,取消上一次设定的定时器,重新生成一个新的定时器,让真正的逻辑重新被推迟到threshold时间之后执行。例子:


image.png

代码看上去还是很直观的。

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) 定义两个变量缓存响应和用户的最终输入:


image.png

(2) 在change事件触发的方法里,让sLastInput保持跟用户的输入一致。

(3) 如果缓存的响应里面已经有了匹配的结果,不需要发出请求,直接从缓存取,这里我将用户最终输入的字符串作为validate token。

image.png

(4) 如果缓存里面没有匹配的结果才发出请求,在响应返回的callback里面,缓存结果并校验token:


image.png

ACT Pattern的更多介绍: http://www.cs.wustl.edu/~schmidt/PDF/ACT.pdf

这本书里也讲了ACT:

http://software-pattern.org/Book/29

比较一下Throttle和Async Completion Token:

image.png

相关文章
|
4月前
|
前端开发 编解码 数据格式
浅谈响应式编程在企业级前端应用 UI 开发中的实践
浅谈响应式编程在企业级前端应用 UI 开发中的实践
浅谈响应式编程在企业级前端应用 UI 开发中的实践
|
4月前
|
算法 数据可视化 程序员
【Qt UI】调色板QPalette类在Qt编程中的应用
【Qt UI】调色板QPalette类在Qt编程中的应用
105 0
|
4月前
|
前端开发 搜索推荐 开发者
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
|
15天前
|
Linux C++ Windows
【Azure 应用服务】Azure App Service(Windows)环境中如何让.NET应用调用SAP NetWeaver RFC函数
【Azure 应用服务】Azure App Service(Windows)环境中如何让.NET应用调用SAP NetWeaver RFC函数
【Azure 应用服务】Azure App Service(Windows)环境中如何让.NET应用调用SAP NetWeaver RFC函数
|
2天前
|
C# Android开发 开发者
Uno Platform 高级定制秘籍:深度解析与实践样式和模板应用,助你打造统一且高效的跨平台UI设计
【9月更文挑战第7天】Uno Platform 是一个强大的框架,支持使用 C# 和 XAML 创建跨平台 UI 应用,覆盖 Windows、iOS、Android、macOS 和 WebAssembly。本文介绍 Uno Platform 中样式和模板的应用,助力开发者提升界面一致性与开发效率。样式定义控件外观,如颜色和字体;模板则详细定制控件布局。通过 XAML 定义样式和模板,并可在资源字典中全局应用或嵌套扩展。合理利用样式和模板能简化代码、保持设计一致性和提高维护性,帮助开发者构建美观高效的跨平台应用。
|
4月前
|
存储 安全 测试技术
使用 Visual Studio Code 创建 SAP UI5 项目遇到 self-signed security certificate 相关问题
使用 Visual Studio Code 创建 SAP UI5 项目遇到 self-signed security certificate 相关问题
|
8天前
|
vr&ar C# 图形学
WPF与AR/VR的激情碰撞:解锁Windows Presentation Foundation应用新维度,探索增强现实与虚拟现实技术在现代UI设计中的无限可能与实战应用详解
【8月更文挑战第31天】增强现实(AR)与虚拟现实(VR)技术正迅速改变生活和工作方式,在游戏、教育及工业等领域展现出广泛应用前景。本文探讨如何在Windows Presentation Foundation(WPF)环境中实现AR/VR功能,通过具体示例代码展示整合过程。尽管WPF本身不直接支持AR/VR,但借助第三方库如Unity、Vuforia或OpenVR,可实现沉浸式体验。例如,通过Unity和Vuforia在WPF中创建AR应用,或利用OpenVR在WPF中集成VR功能,从而提升用户体验并拓展应用功能边界。
22 0
|
8天前
|
C# 开发者 设计模式
WPF开发者必读:命令模式应用秘籍,轻松简化UI与业务逻辑交互,让你的代码更上一层楼!
【8月更文挑战第31天】在WPF应用开发中,命令模式是简化UI与业务逻辑交互的关键技术,通过将请求封装为对象,实现UI操作与业务逻辑分离,便于代码维护与扩展。本文介绍命令模式的概念及实现方法,包括使用`ICommand`接口、`RelayCommand`类及自定义命令等方式,并提供示例代码展示如何在项目中应用命令模式。
16 0
|
8天前
|
开发者 Android开发 UED
打造流畅应用:深入探索如何在Xamarin项目中选择并实现最佳UI/UX设计的实践指南
【8月更文挑战第31天】在数字化时代,UI/UX设计成为应用成功的关键。Xamarin以高效开发和强大兼容性著称,其设计理念“一次编写,处处运行”需充分适应多平台特性,提供一致体验。选择Xamarin.Forms或结合Xamarin.Native可实现跨平台UI设计;遵循各平台设计指南,保持布局一致性和简洁性;通过用户测试不断优化。最终,结合技术和用户需求,打造美观实用的应用,脱颖而出。
19 0
|
26天前
数字化核心构建问题之SAP为应用软件扎根客户打基础如何解决
数字化核心构建问题之SAP为应用软件扎根客户打基础如何解决
10 0