一、问题背景与危害

• 场景：用户高频点击按钮（如登录、支付）触发重复网络请求或计算任务。
• 风险：并发请求导致数据错乱（如重复下单）。界面卡顿甚至应用崩溃（主线程阻塞）。服务器压力剧增（无效流量冲击）。

二、核心技术方案

1. 防抖（Debounce）

原理：延迟执行，若在等待期内再次触发则重置计时。

适用场景：搜索框输入、表单提交。

鸿蒙实现：

function debounce(fn: Function, delay: number = 300) {
  let timer: number | null = null;
  return (...args: any[]) => {
    if (timer) clearTimeout(timer);
    timer = setTimeout(() => fn(...args), delay);
  };
}

// 按钮调用
Button('提交')
  .onClick(debounce(() => {
    // 业务逻辑（如API请求）
  }, 500))

2. 节流（Throttle）

原理：固定时间间隔内仅执行一次。

适用场景：滚动加载、游戏操控。

鸿蒙实现：

function throttle(fn: Function, interval: number = 1000) {
  let lastExec: number = 0;
  return (...args: any[]) => {
    const now = Date.now();
    if (now - lastExec >= interval) {
      fn(...args);
      lastExec = now;
    }
  };
}

// 滚动事件
Scroll().onScroll(throttle(() => {
  // 加载分页数据
}, 200))

三、增强用户体验设计

1. 视觉反馈按钮禁用态：.enabled(false) + 透明度降低。加载动画：LoadingProgress 组件集成。@State isProcessing: boolean = false; Button(this.isProcessing ? '处理中...' : '提交') .enabled(!this.isProcessing) .opacity(this.isProcessing ? 0.6 : 1)
2. 触觉反馈非法操作时触发设备振动（如未勾选协议时点击登录）：import vibrator from '@ohos.vibrator'; // 高频点击时触发600ms振动 vibrator.startVibration({ duration: 600 });

⚠️ 四、特殊场景优化

1. 异步请求竞态处理使用 AbortController 取消前序未完成请求：let controller: AbortController | null = null; async fetchData() { controller?.abort(); // 取消上一个请求 controller = new AbortController(); try { const res = await fetch(url, { signal: controller.signal }); // 处理数据 } catch (e) { /* 忽略取消错误 */ } }
2. 列表项独立防抖ForEach 循环中为每个按钮生成独立防抖函数，避免闭包共享问题：ForEach(this.items, (item) => { Button(item.name) .onClick(debounce(() => this.handleItem(item.id), 300)) })

五、方案选型指南

六、最佳实践总结

1. 基础防护：所有按钮必须绑定防抖/节流逻辑，禁用状态与视觉反馈缺一不可。
2. 参数调优：防抖延迟：300-500ms（平衡响应与防误触）。节流间隔：200-1000ms（根据操作敏感性调整）。
3. 异常处理：网络请求需捕获 AbortError 避免崩溃。失败时自动解锁按钮并提示用户。
4. 性能监测：使用 DevEco Studio 的 ArkUI Inspector 分析点击事件响应耗时