这是 Jerry 2021 年的第 11 篇文章，也是汪子熙公众号总共第 282 篇原创文章。

Jerry 之前的文章 SAP UI5 OData 流言粉碎机：极短时间内发送两个 Odata request, 前一个会主动被 cancel 掉吗，介绍过 SAP 成都研究院 CRM Fiori 开发团队开发过的一个 Live Search 的场景。

用户创立 Opportunity，保护 Account 字段，每输出一个字符，都会触发 SAP UI5 Input 控件的 liveChange 事件。在该事件的 onAccountInputFieldChanged 处理函数里，依据用户输出，发送 OData 申请到后盾进行查问。

如果用户输入速度很快，则在短时间内，会有多个 OData 申请发送到后盾，进而呈现 Jerry 文章里形容的 OData 申请被 cancel 的状况。

最近 Jerry 做 SAP Spartacus 开发，遇到了同样的场景。因而通过本文把本人最近所学总结一下，记录下 SAP UI5 和 Angular 里如何应用函数防抖 (Debounce) 和函数节流 (Throttle) 来防止短时间内触发高频次函数调用的状况呈现。

为了便于解说，Jerry 做了一个只蕴含一个 Input 控件的 SAP UI5 页面。源代码地址.

在 Input 里输出字符，会触发 liveChange 事件，将以后 Input 的最新内容，发送到一个我本人开发的后盾服务去。该后盾服务什么也不做，只是简略将收到的内容返回给 UI.

这个 SAP UI5 页面里的 Input 控件的 liveChange 事件处理如下：

从 Chrome 控制台打印的输入来看，我在一秒钟之内，间断疾速输出了 1234 共 4 个字符，一共产生了 4 个发送往后台的申请。

SAP UI5 如何应用函数防抖 (Debounce) 来升高函数调用的频次

函数防抖(Debounce)，最早源于机械开关和继电器的术语“去弹跳”，行将多个信号合并为一个信号。

设想一个大家现实生活中都会遇到的场景：进电梯。电梯都有一个主动敞开门的超时工夫，假如为 2 秒。当电梯检测到有人进入时，会重置这个 2 秒的计时器。如果下一个 2 秒之内，没有新的乘客进入电梯，电梯门才会主动关上。

电梯提早关门这个场景，就是一个典型的函数防抖的事实例子。电梯关门的行为就是“函数”，通过电梯门的主动敞开超时工夫，2 秒，来提早电梯门的敞开动作的执行，从而升高电梯门的敞开频率，这就是“防抖”。

能够设想，如果电梯门的主动敞开没有设定超时工夫，而是检测到没有人进出之后，立刻敞开，这样会大大增加电梯门开合的频率，既节约能源，也不平安。这就好比 Jerry 本文结尾提到的例子：既然我短时间内输出了字符 1234，我冀望在 UI 看到的，是后盾服务接管到 1234 后返回的后果。至于后盾如何对前三个申请，即字符 1，字符 12 和字符 123 进行解决，我不再关怀。

咱们能够仿照电梯门敞开超时工夫的设定，来给 SAP UI5 的函数调用实现防抖管制。

下图 debounce 变量是一个函数结构器，自身是一个函数，接管另一个函数 fn 作为输出参数，职责是通过闭包，将 fn 革新成一个具备防抖管制性能的新函数，该新函数通过第 17 行的 return 语句返回。

防抖工夫距离通过函数结构器另一个输出参数 delay 指定。

假如咱们指定的防抖工夫距离为 3000 毫秒即 3 秒，如果 3 秒之内，debounce 函数结构器返回的新函数被一直调用，此时执行上图代码第 19 行，调用 clearTimeout 重置计数器，此时原始函数 fn 不会失去执行。这个场景能够类比成：在电梯关门超时工夫内，又有新的乘客进入，电梯超时计时器重置，电梯门不会敞开。

代码第 20 行，应用 setTimeout 重启超时工夫距离为 3 秒的计数器，3 秒过后，如果 JavaScript 工作队列里没有其余待执行工作，则执行原始函数 fn. 代码的第 20 行，好比电梯设施从新开启了 3 秒的超时定时器。

如果在期待的 3 秒之内，没有新的函数调用触发，则 3 秒过后，执行 21 行的原始函数 fn；这好比电梯在 3 秒之内，始终没有新的乘客进入，则 3 秒过后，电梯门主动敞开。

debounce 函数结构器的应用形式也很简略。

代码第 78 行，将原始的 sendRequest 函数，以及 3000 毫秒的防抖工夫距离，传入 debounce 结构器，返回一个兼有数据发送性能和防抖性能的 debounceVersion 函数。在第 85 行原来调用 sendRequest 函数的地位，改为调用 debounceVersion 函数即可。

函数防抖性能的测试：我在同一分钟的第 46 秒，48 秒，50 秒，51 秒四个工夫点，别离输出了 1，2，3，4 总共 4 个字符，然而在最初一次即 51.996 秒又过了 3 秒之后，才仅仅有一个申请发送到后盾：这阐明 3 秒的函数防抖距离失效了：

SAP UI5 如何应用函数节流 (Throttle) 来升高函数调用的频次

上述函数防抖的实现存在一个问题，还是以电梯的例子来阐明。

构想有一个空间有限的电梯，关门的超时工夫为 3 秒。如果一直的有新的乘客以小于 3 秒的工夫距离进入电梯，则电梯门永远没有机会敞开——即函数永远得不到执行。

函数节流 (Throttle) 是另一种升高函数调用频次的思路，同函数防抖的区别是，后者能保障在指定的节流距离内，至多执行一次函数。

函数节流结构器的一个最简略的实现版本：

被节流器革新后的函数每次触发时，取一个以后零碎工夫戳，同前一次触发时取的工夫戳比拟。如果二者的时间差，大于等于结构器的输出参数 delay 即节流工夫距离，则进入第 39 行的 else 分支，触发原始函数 fn；否则阐明节流工夫距离还未达到，应用第 34 行 setTimeout，将原始函数 fn，从新放入 JavaScript 事件队列内，提早执行：

函数节流版本的结构器应用形式，同函数防抖版本的结构器没有差异：将原始函数 sendRequest 传入结构器 throttle，返回一个具备节流性能的新函数 throttleVersion，在 Input 控件 liveChange 事件处理函数里，调用 throttleVersion 这个新函数即可。

函数节流的测试后果：我设置的节流工夫距离为 3 秒，从 Chrome 控制台打印输出能察看到，SAP UI5 的确是大抵以 3 秒的工夫距离，向后盾发动的数据申请。

本文介绍的两种函数防抖和函数节流的实现代码，仅仅思考了最根本的状况，还有很多不欠缺的中央，有趣味的敌人能够在网络上搜寻，这方面的材料十分多，这里不再赘述。

Jerry 之前的分享提到过，Angular 是响应式编程开发库 RxJS 的重度使用者，后者提供了泛滥功能强大的 Operators，使得 Angular 开发人员不必反复造轮子，就能轻易实现出具备函数防抖和函数节流的场景。

用 Angular 从新实现本文 SAP UI5 的 Demo，总共代码只有 44 行：

从 rxjs/operators 工具库中间接导出 debounceTime 和 throttleTime 这两个 operators：

相似 SAP UI5 Input 控件的 liveChange，Angular FormControl 的 valueChanges 也给利用开发人员提供了编写业务逻辑，响应用户输出的地位：后者的 valueChanges 数据类型是 Observable，利用开发人员能够通过 pipe 调用，传入 RxJS 各种功能强大的 Operators，让本人编写的蕴含业务逻辑的事件响应函数，依照理论需要来触发。

比方上图第 39 行代码，语义是：绑定到 jerryFormControl 的 input 控件有 valueChanges 产生时，首先通过防抖器的解决。至于是否可能满足触发 valueChanges 对应的事件处理函数的条件，由防抖器 debounceTime 的外部解决逻辑决定。

RxJS 防抖器 debounceTime 的外部实现应用了 setInterval，逻辑比 Jerry 本文介绍的 debounce 函数结构器简单得多了，通过这些调用栈就能感触一二：

Jerry 这个 Angular Demo 的函数节流 (工夫距离设定为 2 秒) 功能测试如下：我在 7 秒之内，匀速输出 1234567890abc，能够看到总共触发了三个发送到后盾的申请，申请距离为 2 秒：

心愿本文能帮忙大家对函数防抖和函数节流的概念有一个最浅显的了解，感激浏览。

更多浏览

(0) SAP UI5 利用开发人员理解 UI5 框架代码的意义

(1) SAP UI5 module 懒加载机制

(2) SAP UI5 控件渲染机制

(3) HTML 原生事件 VS SAP UI5 Semantic 事件

(4) SAP UI5 控件元数据的元数据实现

(5) SAP UI5 控件的实例数据批改和读取逻辑

(6) SAP UI5 控件数据绑定的实现原理

(7) SAP UI5 控件数据绑定的三种模式：One Way, Two Way 和 OneTime 实现原理比拟

(8) SAP UI5 控件 ID 的生成逻辑

(9) SAP UI5 控件的多语言 (国际化,Internationalization,i18n) 反对的实现原理

(10) XML 视图里的 button 控件

(11) button 控件和它背地的 DOM 元素

(12) SAP UI5 OData 流言粉碎机：极短时间内发送两个 Odata request, 前一个会主动被 cancel 掉吗

(13) 漫谈 SAP 产品里页面上的 Checkbox 设计与实现系列之一

更多 Jerry 的原创文章，尽在：” 汪子熙 ”:
![](
https://img-blog.csdnimg.cn/i…