遇到驗證碼獲取倒計時等場景需要用到定時器Interval,以下展示vue中計時器的用法
data() {
return {
codeTime: 60, // 倒計時讀秒數
codeTimer: Function // 定義驗證碼倒計時器
}
},
mounted() {
this.codeTimer = setInterval(()=>{
this.codeTime--
if(this.codeTime <= 0) {
window.clearInterval(this.codeTimer)
}
},1000)
},
beforeDestory() {
window.clearInterval(this.codeTimer) // 頁面銷燬前清除定時器
}
vue中會有無法清除定時器的情況,直接使用window.xxx來解決
同樣,在重啓定時器時也需要先清除定時器,否則會造成定時器計時錯亂。