vue中清除定时器

时间:2024-08-10 16:33:20

1.data中定义

timer:90,
timeName:null 点击支付则倒计时按钮出来
pay(){
this.timeName= setInterval(()=>{
this.timer--
console.log(this.timer)
if(this.timer==0){
alert('时间到返回主页')
return
}
},1000)
}
      beforeDestroy(){
// 清楚定时器
clearInterval(this.timeName)
}
--------------------------------------------------------------------

vue中清除定时器

点击取消支付后,计时器暂停

它没有真正意义上的暂停,只有清除之后,在继续
<el-dialog
:close-on-click-modal ="false"
title="提示"
:visible.sync="cancelDialogVisible"
width="30%"
center
@close='closeDialog'>
<p style="text-align: center">{{txt}}</p>
<div class="dialog-div">
<el-button @click="cancelDialogVisible = false">取 消</el-button>
<el-button type="primary" @click="sure">确 定</el-button>
</div>
</el-dialog>
//          关闭模态框的事件,公用的模态框,所有判断小于90s不,小于的话就是这个模态框
closeDialog(){
let tt=this.timer //获取当前暂停的时间是多少秒
if(this.timer<90){
this.timer=tt//重新给它赋值,然后执行定时器搞定
this.timeName= setInterval(()=>{
if(this.timer==0){
this.$router.push('/index')
return
}
this.timer-- },1000)
} },