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

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

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

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

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

js 复制代码
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

js 复制代码
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%');
  }
}

【测试结果】

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

js 复制代码
用户单击了
防抖测试onClick方法在指定时间500内已执行过
用户双击了
用户双击了
防抖测试onClick方法在指定时间500内已执行过
用户双击了
防抖测试onClick方法在指定时间500内已执行过

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

总结

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

相关推荐
猛码Memmat1 小时前
华为HarmonyOS开发文档
华为·harmonyos
祥睿夫子2 小时前
ArkTS 未被深挖的核心点:静态多态限制、静态成员与单例实战
harmonyos
高心星4 小时前
HarmonyOS 5.0应用开发——V2装饰器@local的使用
harmonyos
HarmonyOS_SDK4 小时前
【FAQ】应用A如何使用应用B内的文件?
harmonyos
万少4 小时前
可可图片编辑 HarmonyOS(6)水印效果
前端·harmonyos
流影ng4 小时前
【HarmonyOS】MVVM与三层架构
华为·架构·harmonyos
爱笑的眼睛114 小时前
HarmonyOS Stage 模型与 ArkUI 声明式开发深度实践:构建高效稳定的应用
华为·harmonyos
鸿蒙小白龙4 小时前
鸿蒙应用之网络请求方案总结
harmonyos·鸿蒙·鸿蒙系统·open harmony
安卓开发者4 小时前
鸿蒙Next ArkWeb网页文件上传与下载完全指南
华为·harmonyos
低调小一4 小时前
「2025最新」HarmonyOS 5.1 HelloWorld项目深度解析:从零到一完整开发指南
华为·harmonyos