vue项目和小程序项目中的倒计时
倒计时
需求：同一账户连续登录失败2次，锁定该账户15分钟
后台做起来应该比前台简单，但是后台不做，那就拿到前台来做吧，主要是记录下来和小程序做下对比（语法）因为最近的项目在vue和微信小程序中来回跳转，今天vue项目，明天就是小程序项目，来回反复。
大致流程：点击登陆时，将账号密码验证码通过接口传给后台，后台进行比对，比对成功时跳转页面，账号密码错误比对失败时，清空账号密码验证框中的值，然后开始计数，即图中的num++。需要在data数据中先定义num，然后在方法中直接this.num即可拿到，this.num++,即可加1。当达到一定数时，将登陆按钮置换为不可登陆的状态。
vue项目中是以倒计时的状态在显示，在倒计时内不可登陆
代码片段：
// 登录获取用户信息 token
userLogin () {
this.userModel.userMobile = this.userName
this.userModel.userPwd = this.userPwd
let result = this.checkResult()
if (result) {
this.$http.post(this.$baseUrl + ‘/user/login‘, JSON.stringify(this.userModel), {
headers: {
‘Content-Type‘: ‘application/json;‘
},
emulateJSON: true
}).then((Data) => {
let data = Data.data
if (data.success) {
if (data.data.token) {
// eslint-disable-next-line no-undef
$cookies.set(‘userToken‘, data.data.token)
// eslint-disable-next-line no-undef
this.$store.commit(‘login‘, $cookies.get(‘userToken‘))
// 登录跳转
this.$router.push(‘/zhhome‘)
}
} else {
this.changeCode()
// 清空输入框内容
this.$refs.identifyCode.value = ‘‘
this.$message({ type: ‘error‘, duration: 3000, message: data.message, center: true })
// 锁定登陆
this.num++
console.log(this.num)
if (this.num >= 5) {
this.message = ‘同一账户连续登录失败5次，锁定该账户15分钟‘
this.$message({ type: ‘error‘, duration: 3000, message: this.message, center: true })
// 切换按钮
this.disabled = false
// 开始倒计时
this.timer = setInterval(() => { this.count-- }, 1000)// eslint-disable-line no-unused-vars
setTimeout(() => {
if (this.count === 0) {
clearInterval(this.timer)// eslint-disable-line no-unused-vars
}
}, 5000)
this.count = 5 // 避免时间到了再次输入的时候count为负值或其他（这一步很有必要）
console.log(this.count)
// 1000s之后再次切换登陆按钮
setTimeout(() => {
this.disabled = true
}, 5000)
clearTimeout()
}
}
}).catch((error) => {
Artery.message.error(error.message) // eslint-disable-line no-undef
})
} else {
this.changeCode()
// 清空输入框内容
this.$refs.identifyCode.value = ‘‘
this.$message({ type: ‘error‘, duration: 5000, message: this.message, center: true })
}
},
难点及思考点：
-
在代码中直接写间歇函数时无法进行清除，会出现倒计时到0时不停，且为负的，肯定是不符合需求的，在data中写timer："",将间歇计数函数清除掉时，
clearInterval(this.timer)即可。 -
延迟函数停止时还要将计数的数字归为原来的数字，否则下一次倒计时时就直接按照上一次的进行了，因为定时器类似于异步函数了，不能直接在下面将data中的count归为5，既然间歇延迟函数是异步函数我们也可以写一个异步函数，在倒计时结束时将数字归为原来的数字，即：
-
setTimeout(() => { if (this.count === 0) { clearInterval(this.timer)// eslint-disable-line no-unused-vars } }, 5000) this.count = 5 // 避免时间到了再次输入的时候count为负值或其他（这一步很有必要）
小程序中的流程较为简单：在接口返回失败时，拿到后台返回的数据，并累计加数字，数字累计满足时切换另一个登陆的按钮，因为研发经理要求的是不用给用户提示倒计时，而是点击按钮提示 “输错次数过多，请30分钟后重试”
这个就不考虑使用间歇延迟函数让时间每秒减1。只需一个定时器即可。
onFailed: function (msg) { //onFailed回调
wx.hideLoading();
if (msg) {
wx.showToast({
title: msg,
icon: "none"
})
// 判断输错次数
// 获取data 中的值
this.setData({
num:(this.data.num)+1
})
// 如果输错次数达到5
if(this.data.num===5){
this.setData({
login:false,
login2: true,
isShowSignButtton2: true
})
setTimeout(()=>{
this.setData({
num:0,
login:true,
isShowSignButtton: true,
login2: false,
isShowSignButtton2: false,
isShowsgin: false
})
// },1000*60*30)
},10000)
}
}else{
wx.showToast({
title:‘用户名或密码有误，请仔细检查或者联系系统管理员‘,
icon: "none"
})
}
},
两者不同的是：
-
拿data中的值：
- vue中直接this.num就可以拿到
- 小程序中要this.data.num才可以拿到
-
改变data中的值：
- vue中直接this.num:2即可赋值
- 小程序中要
this.setData({num:2})
-
data中的值加1时：
- vue中直接this.num++
- 小程序中
this.setData({num:(this.data.num)+1})
其实感觉不是生熟的问题，是习惯的问题。就突然切换不过来，嘻嘻??
原文：https://www.cnblogs.com/wszzj/p/14294099.html