鸿蒙应用示例:单例工具类实现防抖动策略

在现代移动应用开发中,特别是在触控设备上,用户可能会由于误操作或习惯性的快速重复点击,导致同一功能被多次触发。这种情况不仅影响用户体验,还可能导致应用程序逻辑错误或资源浪费。针对此类问题,前端开发人员通常采用防抖(debounce)技术来限制函数的执行频率,确保在一段时间内函数仅被执行一次。在HarmonyOS应用开发中,我们同样可以引入防抖机制来解决此类问题。

解决方案:单例工具类实现防抖

为了实现防抖功能,设计了一个名为MyDebounceSingletonUtil的单例工具类。这个工具类利用单例模式来保证在整个应用生命周期中只有一个实例存在,从而减少资源消耗。此外,它还使用了一个Map对象来跟踪每个方法最后一次执行的时间,以此来判断是否应该再次执行该方法。

【工具类实现】src/main/ets/common/MyDebounceSingletonUtil.ets

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
export class MyDebounceSingletonUtil {
  private static instance: MyDebounceSingletonUtil;
  private static methodsMap: Map<string, number> = new Map();
 
  private constructor() {
  }
 
  public static getInstance(): MyDebounceSingletonUtil {
    if (!MyDebounceSingletonUtil.instance) {
      MyDebounceSingletonUtil.instance = new MyDebounceSingletonUtil();
    }
    return MyDebounceSingletonUtil.instance;
  }
 
  public isDebounced(methodName: string, milliseconds: number): boolean {
    const now = Date.now();
    const lastExecutionTime = MyDebounceSingletonUtil.methodsMap.get(methodName);
 
    if (lastExecutionTime && (now - lastExecutionTime) < milliseconds) {
      console.info(`${methodName}方法在指定时间${milliseconds}内已执行过`);
      return true; // 方法在指定时间内已执行过
    } else {
      MyDebounceSingletonUtil.methodsMap.set(methodName, now);
      return false; // 方法在指定时间内未执行过
    }
  }
}

  【使用示例】src/main/ets/pages/Index.ets

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
import { MyDebounceSingletonUtil } from '../common/MyDebounceSingletonUtil';
 
@Entry
@Component
struct Page001 {
  build() {
    Column({ space: 10 }) {
      Button('单击测试').onClick(() => {
        if (MyDebounceSingletonUtil.getInstance().isDebounced('防抖测试onClick', 500)) {
          return;
        }
        console.info('用户单击了');
      });
      Button('双击测试')
        .gesture(
          GestureGroup(GestureMode.Exclusive,
            TapGesture({ count: 2 }).onAction((event?: GestureEvent) => {
              if (MyDebounceSingletonUtil.getInstance().isDebounced('防抖测试onClick', 500)) {
                return;
              }
              console.info('用户双击了')
            })
          )
        )
    }
    .width('100%')
    .height('100%');
  }
}

  

【测试结果】

通过实际测试,我们可以看到当用户在短时间内连续点击按钮时,只有首次点击真正触发了按钮的点击事件,后续的点击由于触发了防抖机制而被忽略。具体输出如下:

1
2
3
4
5
6
7
用户单击了
防抖测试onClick方法在指定时间500内已执行过
用户双击了
用户双击了
防抖测试onClick方法在指定时间500内已执行过
用户双击了
防抖测试onClick方法在指定时间500内已执行过

  

从输出结果可以看出,单击和双击事件都受到了有效的防抖控制,这表明我们的防抖机制工作正常。

总结

通过引入MyDebounceSingletonUtil工具类,我们成功地在HarmonyOS应用中实现了防抖动功能。这一策略不仅提升了应用的稳定性,还优化了用户体验,减少了不必要的资源消耗。对于那些需要频繁响应用户输入的应用来说,防抖技术是一项值得推广的最佳实践。通过合理的防抖设计,我们可以显著改善应用的响应性和整体性能。

posted @   zhongcx  阅读(46)  评论(0编辑  收藏  举报
编辑推荐:
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· DeepSeek 开源周回顾「GitHub 热点速览」
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
点击右上角即可分享
微信分享提示