uniapp-发送验证码(节流)

最新推荐文章于 2023-10-13 17:15:06 发布

原创最新推荐文章于 2023-10-13 17:15:06 发布 · 756 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

js 专栏收录该内容

11 篇文章

订阅专栏

本文记录了在uniapp项目中实现发送验证码功能时使用节流技术的实践过程。通过代码示例，介绍了如何简单有效地应用节流防止频繁发送验证码。

uniapp-发送验证码(节流)

做项目时在写发送验证码的时候忘记写节流，写完后测试时才发现，写的时候又突然忘记写法了，决定还是记下来为好,还算比较简单，一看就能看懂；

代码如下：

export default {
	data(){
		return{
			totalTime: 60,
			canClick: true, // 节流
			clockTimer: null, //定时器
			codeText: '获取验证码',
		}
	},
	methods: {
		onSendCode() {
				//this.disabledCode = true;
				if (!this.canClick) return // 节流 防止频繁访问接口
				this.canClick = false
				console.log('进入倒计时...')
				this.codeText = "重新获取(" + this.totalTime + 's)'
				let that = this
				that.clockTimer = setInterval(() => {
					that.totalTime--
					that.codeText = "重新获取(" + that.totalTime + 's)'
					if (that.totalTime < 0) {
						clearInterval(that.clockTimer)
						that.codeText = '发送验证码'
						that.totalTime = 60
						that.canClick = true
						//that.disabledCode = false;
					}
				}, 1000)
			},
	}
}