vue中清除定時器

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

--------------------------------------------------------------------

點擊取消支付后，計時器暫停

 

它沒有真正意義上的暫停，只有清除之后，在繼續

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

          },