什么是防抖?
防抖:简单地说,就是 当一个动作连续触发,只执行最后一次。
常用场景:前端发送短信验证码(用户快速连续点击发送验证码按钮,只执行一次发送验证码事件)
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>