uniapp-防抖之发送验证码

什么是防抖?

防抖:简单地说,就是 当一个动作连续触发,只执行最后一次。

常用场景:前端发送短信验证码(用户快速连续点击发送验证码按钮,只执行一次发送验证码事件)


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>


上一篇:外包项目-外卖跑腿
下一篇:农场项目