什么是防抖?
防抖:简单地说,就是 当一个动作连续触发,只执行最后一次。
常用场景:前端发送短信验证码(用户快速连续点击发送验证码按钮,只执行一次发送验证码事件)
uniapp代码
<template>
<view class="">
<view class="line">
<input type="text" v-model="phone" placeholder="请输入您的手机号 " class="input">
</view>
<view class="line">
<input type="text" v-model="sms_code" placeholder="请输入短信验证码 " class="input">
<text class="get-sms" @click="getSms()" v-if="time >= 60">获取验证码</text>
<text class="get-sms" v-else>{{time}}S</text>
</view>
</view>
</template>
<script>
export default {
data() {
return {
request: false,
phone: "",
sms_code: '',
timer: null,
time: 60,
};
},
methods: {
//发送验证码
getSms() {
if (!this.phone) return this.fail("请输入手机号码")
let params = {
phone: this.phone,
}
// 防抖-开始
if (this.request) return false;
this.request = true;
setTimeout(() => {
this.request = false;
}, 2000)
// 防抖结束
this.api.post("/login/sendCode", { params: params }).then(res => {
this.success("验证码发送成功")
clearInterval(this.timer)
this.timer = setInterval(() => {
if (this.time > 0) {
this.time--
} else {
clearInterval(this.timer)
this.time = 60
}
}, 1000)
}).catch(err => {
this.apiErr(err)
})
},
}
}
</script>