HarmonyOS 鸿蒙端防抖动策略：单例工具类助力提升应用稳定性

【背景】

在当前的前端Web开发中，频繁的调用鸿蒙端功能已成为导致bug的常见原因。为了解决这一问题，前端团队无法直接进行修改，因此我们决定在鸿蒙端进行优化。通过引入防抖动机制，我们可以在单位时间内确保功能调用仅执行一次，从而有效避免bug的发生。

【工具类实现】为了实现这一功能，我们开发了一个名为 MyDebounceSingletonUtil 的防抖工具类。该工具类位于 entry/src/main/ets/common/ 目录下，其结构如下：

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);
<span class="hljs-keyword"><span class="hljs-keyword">if</span></span> (lastExecutionTime &amp;&amp; (now - lastExecutionTime) &lt; milliseconds) {
  console.info(`${methodName}方法在指定时间${milliseconds}内已执行过`)
  <span class="hljs-keyword"><span class="hljs-keyword">return</span></span> <span class="hljs-literal"><span class="hljs-literal">true</span></span>; <span class="hljs-comment"><span class="hljs-comment">// 方法在指定时间内已执行过</span></span>
} <span class="hljs-keyword"><span class="hljs-keyword">else</span></span> {
  MyDebounceSingletonUtil.methodsMap.set(methodName, now);
  <span class="hljs-keyword"><span class="hljs-keyword">return</span></span> <span class="hljs-literal"><span class="hljs-literal">false</span></span>; <span class="hljs-comment"><span class="hljs-comment">// 方法在指定时间内未执行过</span></span>
}
}
}
// // 使用示例
// if (MyDebounceSingletonUtil.getInstance().isDebounced(‘call’, 500)) {
//   return;
// }<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>

【使用示例】以下是如何在页面 Page001.ets 中使用 MyDebounceSingletonUtil 工具类的示例：

import { MyDebounceSingletonUtil } from ‘…/common/MyDebounceSingletonUtil’;

@Entry
@Component
struct Page001 {
build() {
Column() {
Button(‘防抖测试’).onClick(() => {
if (MyDebounceSingletonUtil.getInstance().isDebounced(‘防抖测试onClick’, 500)) {
return;
}
console.info(‘执行了防抖测试点击事件’)
})
}
.width(‘100%’)
.height(‘100%’)
}
}<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>

【测试结果】通过快速点击测试，我们发现 防抖测试onClick 方法在500毫秒内确实只执行了一次，验证了防抖功能的正确性。

防抖测试onClick方法在指定时间500内已执行过
执行了防抖测试点击事件
防抖测试onClick方法在指定时间500内已执行过
防抖测试onClick方法在指定时间500内已执行过
防抖测试onClick方法在指定时间500内已执行过
执行了防抖测试点击事件
防抖测试onClick方法在指定时间500内已执行过
防抖测试onClick方法在指定时间500内已执行过
防抖测试onClick方法在指定时间500内已执行过<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>

【总结】

通过引入 MyDebounceSingletonUtil 工具类，我们成功地在鸿蒙端实现了方法调用的防抖功能，有效减少了bug的发生。这一解决方案为前端和鸿蒙端之间的交互提供了更加稳定和可靠的保障。