复制按钮需防抖以防手抖连点导致Toast重复弹出、系统提示框叠加或UI卡顿；应封装Debounce函数，设300–500ms延时，校验内容有效性，并用闭包+clearTimeout双控定时器。
复制按钮为什么需要防抖
用户长按文字后点击「复制」按钮，或直接点击带 uni.setClipboardData 的按钮时，容易因手速快、误触、触摸穿透等原因连续触发多次。虽然剪贴板 API 本身幂等，但频繁调用会引发：Toast 提示重复弹出、iOS 触感反馈叠加震动、Android 厂商 ROM 弹出多个系统提示框，甚至在部分低端机上造成 UI 卡顿。防抖不是“锦上添花”，而是防止体验断层的底线操作。
用 Debounce 包裹 uni.setClipboardData 调用
别直接在 @click 里写逻辑，必须封装成防抖函数。注意三点：
- 防抖时间设
300–500ms：太短拦不住连点，太长让用户觉得“点了没反应” - 必须校验内容有效性——空字符串、纯空格、超长文本（如 >10KB）提前
return，避免无效防抖 - 不要用
setTimeout简单 return；要靠闭包变量 +clearTimeout双控，否则真机上可能漏清定时器
示例（utils/debounce.js）：
export const Debounce = (fn, delay = 300) => {
let timer = null
return function (...args) {
if (timer) clearTimeout(timer)
timer = setTimeout(() => {
fn.apply(this, args)
timer = null
}, delay)
}
}
页面中使用：
import { Debounce } from '@/utils/debounce.js'
export default {
methods: {
copyText: Debounce(function (text) {
if (!text || !text.trim()) return
uni.setClipboardData({
data: text.trim(),
success: () => uni.showToast({ title: '已复制', icon: 'none' }),
fail: () => uni.showToast({ title: '复制失败', icon: 'none' })
})
}, 400)
}
}
真机上防抖“失效”的三个典型原因
开发工具里一切正常，一上真机就重复触发，大概率是这些隐藏问题：
-
catch:longpress没加或加错位置：App 端长按复制需用catch:longpress阻断默认手势冒泡，若只写@longpress，iOS/Android WebView 可能同时触发原生菜单和你的 JS 逻辑 - 多次绑定事件：比如在
onShow里反复uni.$on('copy')或addEventListener，导致多个防抖实例共存，彼此不共享timer - 按钮父容器有
pointer-events: none或缺失catchtouchmove：安卓真机触摸穿透会让底层 view 接收第二次点击，表面看是“同一个按钮被点了两次”
别把防抖当兜底，后端也要配合
前端防抖只能减少请求数，不能替代服务端校验。尤其在以下场景必须后端协同：
- 复制的是动态生成的 token、优惠码、邀请链接等敏感值，需限制单位时间内单用户可复制次数
- H5 端用户切后台再切回，
visibilitychange事件延迟可能导致防抖计时器已过期，但用户感知仍是“刚点完又点了一次” - 某些 Android 厂商 ROM（如 OPPO、vivo）会主动缓存剪贴板历史，用户可能从系统面板粘贴到其他 App，此时前端完全不可控
真正健壮的复制流程，是「前端防抖 + 内容校验 + 后端频控 + 用户提示收敛」四层防护。漏掉任何一层，都可能在某个机型或网络条件下突然崩掉。
