uniapp-发送验证码(节流)

骚瑞这是个bug

于 2021-01-12 15:46:11 发布

阅读量739

点赞数 1

CC 4.0 BY-SA版权

分类专栏： js 文章标签： javascript

本文链接：https://blog.youkuaiyun.com/thesize/article/details/112530689

js 专栏收录该内容

11 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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)
			},
	}
}