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

在现代移动应用开发中，特别是在触控设备上，用户可能会由于误操作或习惯性的快速重复点击，导致同一功能被多次触发。这种情况不仅影响用户体验，还可能导致应用程序逻辑错误或资源浪费。针对此类问题，前端开发人员通常采用防抖(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应用中实现了防抖动功能。这一策略不仅提升了应用的稳定性，还优化了用户体验，减少了不必要的资源消耗。对于那些需要频繁响应用户输入的应用来说，防抖技术是一项值得推广的最佳实践。通过合理的防抖设计，我们可以显著改善应用的响应性和整体性能。