为了应对频繁的事件调用所带来的性能瓶颈，我们需要引入防抖（debounce）和节流（throttle）这两个利器。
防抖：抑制不必要的高频事件
防抖是一种技术，它可以在一定时间内抑制不必要的高频事件。在鸿蒙应用开发中，防抖可以用来优化事件处理，例如按钮点击事件。
防抖的工作原理是：当一个事件被频繁调用时，防抖函数会将事件放入一个计时器中。在这个计时器中，事件将在一个指定的等待时间后执行。如果在等待时间内又收到了该事件的调用，那么计时器将被重新设置，等待时间将从头开始计算。
节流：限制事件调用的频率
节流是一种技术，它可以限制事件调用的频率。在鸿蒙应用开发中，节流可以用来优化输入框中的输入事件处理。
节流的工作原理是：当一个事件被频繁调用时，节流函数会将事件放入一个令牌桶中。在这个令牌桶中，事件将按照一个固定的速度执行。如果令牌桶已满，那么事件将被丢弃。
防抖与节流的比较
防抖和节流都是用来处理高频事件的利器，但是它们的工作方式不同。
- 防抖： 在一定时间内只执行一次事件。
- 节流： 以固定的速度执行事件，丢弃多余的事件。
在鸿蒙应用开发中的应用
防抖和节流可以在鸿蒙应用开发中得到以下应用：
- 事件处理： 防抖可以用来优化按钮点击事件等高频事件的处理，避免不必要的高频调用。
- 输入框输入： 节流可以用来限制输入框中输入事件的频率，避免不必要的多余请求。
- 网络请求： 防抖和节流可以用来优化网络请求，避免不必要的多余请求。
- 滚动事件： 节流可以用来限制滚动事件的频率，避免不必要的高频调用。
示例代码
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
/** * 防抖函数 * * 用法： * * Text() { * Span($r("app.string.text")) * } * .onClick(debounce(() => { * // do click * })) * * @param fn { Function } 需要进行防抖处理的函数 * @param debounceMs { number } 防抖限制的时间，单位（毫秒） */ export function debounce(fn: Function, debounceMs: number = 100) { let timer: number = 0; let cancelTimer = false; return () => { if (cancelTimer) { clearTimeout(timer); cancelTimer = false; } timer = setTimeout(() => { timer = 0; cancelTimer = false; fn(); }, debounceMs); cancelTimer = true; }; } /** * 节流函数 * * 注意：要求第一次事件发生的时候立即执行，然后再进行节流操作 * * 如果先节流后执行会导致用户感觉到明显的响应延迟，造成响应卡顿的假象 * * 用法： * * Text() { * Span($r("app.string.text")) * } * .onClick(throttle(() => { * // do click * })) * * @param fn { Function } 需要进行节流处理的函数 * @param throttleMs { number } 节流限制的时间，单位（毫秒） */ export function throttle(fn: Function, throttleMs: number = 200) { let drop = false; return () => { if (!drop) { drop = true; setTimeout(() => { drop = false; }, throttleMs); fn(); } }; } |
总结
防抖和节流是鸿蒙应用开发中提升性能的利器。通过合理使用防抖和节流，可以有效优化事件处理、输入框输入、网络请求和滚动事件，从而提升应用的整体性能和用户体验。