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

猜你喜欢

转载自blog.csdn.net/thesize/article/details/112530689