按钮连点必须用防抖而非节流，因节流会丢弃中间点击导致用户误操作；防抖配合isSubmitting标志位、disabled状态及finally重置，可确保表单等“只执行一次”操作安全。
uni-app 里按钮连点该用防抖还是节流
按钮点击必须用防抖（debounce），不能用节流（throttle）。节流会在固定间隔内“丢掉”中间的点击，用户点两下只响应一次，还可能没反馈，于是再猛点——反而加剧重复提交。防抖则是等你“停手”后再执行最后一次，符合表单提交语义。
常见错误：throttle(this.handleSubmit, 500) 包按钮方法，真机上用户点得快，第二下直接被吞，但 UI 没锁、没 loading，用户以为没点上，继续狂点。
- 防抖适用场景：表单提交、支付确认、积分领取等「最终只执行一次」操作
- 节流适用场景：
onReachBottom、scrolltoupper、地图拖拽回调等高频持续触发事件 -
onPullDownRefresh不需要节流，它是用户主动下拉，天然低频
最简防抖实现：setTimeout + 响应式标志位
别急着引入 lodash.debounce，uni-app 多端编译下闭包和 this 指向容易错乱，且无法响应式追踪状态。直接用 data 里声明一个 isSubmitting 变量，配合 setTimeout 控制更稳。
关键点：
- 判断和设值必须在请求发起前：
if (this.isSubmitting) return; this.isSubmitting = true; -
setTimeout必须写在uni.request调用之前，不是then或finally里——否则失败重试时状态卡死 - 定时器时间建议设 1500ms，太短（如 300ms）挡不住手速快的用户，太长（如 3000ms）影响体验
- 务必在
finally中手动重置：this.isSubmitting = false，否则网络失败后按钮永远锁死
示例片段：
data() {
return {
isSubmitting: false
}
},
methods: {
async handleSubmit() {
if (this.isSubmitting) return
this.isSubmitting = true
// 防抖定时器：1500ms 后自动解锁（兜底）
setTimeout(() => { this.isSubmitting = false }, 1500)
try {
await uni.request({ url: '/api/submit' })
uni.showToast({ title: '提交成功' })
} catch (err) {
uni.showToast({ title: '提交失败', icon: 'none' })
} finally {
this.isSubmitting = false // 主动恢复，覆盖定时器
}
}
}
按钮 disabled + loading 状态必须同步控制
光靠防抖函数或标志位还不够。用户点完没视觉反馈，网络慢时大概率二次点击——所以 UI 层锁定是硬性要求。
button 组件的 disabled 属性在 H5 和小程序表现一致，但自定义按钮需手动绑定 :disabled="isSubmitting" 并配样式变化（比如加 opacity: 0.6 或插入 loading 图标）。
- 不要只依赖
uni.showLoading：它关闭不代表请求结束，fail回调可能滞后，此时若已重置isSubmitting，就放行了重复提交 - 禁用状态必须由业务逻辑控制，不能靠防抖函数内部自动管理
- 真机调试时出现防抖失效，大概率是触摸穿透或双击误判，可加
catchtouchend或检查父容器pointer-events
输入框防抖要单独处理，不能和按钮共用同一套逻辑
搜索框、手机号校验这类 @input 场景，适合用标准防抖函数，但要注意参数获取方式：
- 小程序中
e.detail.value是输入值，不能直接传给debounce返回的函数，得在外层取好再传入 - 避免把整个校验逻辑塞进防抖函数里——否则用户输错格式，没法立刻弹
uni.showToast提示 - 推荐拆成两步：同步校验（空值、格式）→ 异步请求（带防抖）
- 防抖函数本身建议封装在
utils/debounce.js，导出后在页面onLoad里初始化并绑定this，防止作用域丢失
示例（输入框）：
import debounce from '@/utils/debounce.js'
export default {
data() {
return {
searchKey: ''
}
},
onLoad() {
this.debouncedSearch = debounce(this.doSearch, 800)
},
methods: {
onInput(e) {
const val = e.detail.value
this.searchKey = val
if (val.trim()) this.debouncedSearch(val)
},
doSearch(key) {
uni.request({ url: '/api/search?q=' + key })
}
}
}
复杂点在于：防抖和状态锁是两套机制，缺一不可。很多人只做了一层，线上就出重复订单或积分翻倍——UI 锁定是用户感知层，防抖是逻辑拦截层，标志位是状态同步层，三者得咬合住。
