使用lodash debounce 防抖
通过添加延时器或者控制点击状态存在问题:虽都能满足防重复点击的需求,但实际测试发现延时的时间不好控,如果延时时间短(<150ms)快速点击还是会有几率多次触发事件。延时时间长(>600ms),用户点击后会有个明显的延时过程才能触发事件,用户体验就不太好。
可以解决:
- 用户在按下按钮的时候立即触发点击事件。
- 用户在快速连续按下按钮的时候只触发第一次的点击事件。
- 用户不间断疯狂点击按钮(暴力测试),也只是立即触发第一次的事件,在疯狂点击的过程中不会触发事件,即使超时时间已经过去。
<template>
<view class="get_address" @click="regetlocation">
<view class="address_icon">
<image src="/images/reload.png" />
</view>
<view class="title">重新定位</view>
</view>
</template>
<script>
import _ from "lodash"
export default {
data() {
return {
};
},
methods: {
regetlocation: _.debounce(function() {
//要实现的业务逻辑
setTimeout(() => {
uni.showToast({
icon: 'none',
title: 30 s后可再次点击
})
}, 1000) // 30秒后显示提示
}, 30000, {
'leading': true, //在延迟开始前立即调用事件
'trailing': false, //在延时结束后不调用,保证事件只被触发一次
})
}
</script>