<template>
<div>
<p @click="codeFn" v-if='isShow'>发送验证码</p>
<p v-else>{{text}}秒</p>
</div>
</template>
<script>
export default {
data() {
return {
text: 6,//倒计时起始时间
timerId: '',
intervalId: '',
isShow: true
}
},
created () {
this.timeoutFn()// 控制台可以看到延时计时器执行情况
},
methods: {
// 一,延时计时器,(注意是异步,会晚于同步代码执行),延迟一段时间执行,执行一次
timeoutFn() {
this.timerId = setTimeout(() => {
console.log('aa')
}, 5000)// 5秒以后执行console.log('aa')
console.log('this.timerId', this.timerId)// this.timerId用来存储setTimeout()的返回值
},
// 清除延时计时器-----clearTimeout()
clearTimeoutFn() {
clearTimeout(this.timerId)
},
// 二,循环计时器-循环执行
intervalFn() {
this.intervalId = setInterval(() => {
if (this.text > 1) { // 现在最后显示的数字是1,如果要最后数字是0,改为this.text > 0
this.text--
console.log(this.text)
} else if (this.text === 1) { // 现在最后显示的数字是1,如果要最后数字是0,改为this.text === 0
this.isShow = true // 显示'发送验证码'
}
}, 1000)
},
// 清除循环计时器----clearInterval()
clearIntervalFn() {
clearInterval(this.intervalId)
},
// 点击发送验证码
codeFn() {
this.text = 6
this.isShow = false // 关闭'发送验证码'
this.clearIntervalFn() // 先清除循环计时器
this.intervalFn()// 再调用循环计时器
}
// 三,延时计时器,自调用,也可以实现倒计时效果,关键代码-setTimeout(this.timeoutFn, 1000)
// timeoutFn() {
// this.text--
// this.timerId = setTimeout(this.timeoutFn, 1000)// this.timeoutFn自调用
// if (this.text < 1) {
// clearTimeout(this.timerId)// 清除定时器
// this.isShow = true // 显示'发送验证码'
// }
// }
}
intervalFn2() {
this.intervalId = setInterval(() => {
if (this.text > 1) { // 现在最后显示的数字是1,如果要最后数字是0,改为this.text > 0
this.text--
console.log(this.text)
} else if (this.text === 1) { // 现在最后显示的数字是1,如果要最后数字是0,改为this.text === 0
this.isShow = true // 显示'发送验证码'
console.log('1231111')
clearInterval(this.intervalId)// 清除循环计时器
}
}, 1000)
}
}
</script>
<style>
</style>
setTimeout()和setInterval(),发送验证码的应用
于 2022-08-23 18:28:34 首次发布