递归-vue2-抽奖缓慢暂停

<template>
  <div class="about">
   <div style="width: 50px;height: 50px;margin-bottom: 10px;background-color: red;" :class="[now==1?'chooselei':'']"></div>
   <div style="width: 50px;height: 50px;margin-bottom: 10px;background-color: red;" :class="[now==2?'chooselei':'']"></div>
   <div style="width: 50px;height: 50px;margin-bottom: 10px;background-color: red;" :class="[now==3?'chooselei':'']"></div>
   <div style="width: 50px;height: 50px;margin-bottom: 10px;background-color: red;" :class="[now==4?'chooselei':'']"></div>
   <div style="width: 50px;height: 50px;margin-bottom: 10px;background-color: red;" :class="[now==5?'chooselei':'']"></div>
   <button @click="stop()">停</button>
  </div>
</template>
<script>

export default {
  name: 'Home',

  data(){
    return {
      now:1,
      t:null,
      nowcount:0
    }
  },
  mounted(){
    this.moni()
  },
  methods:{
     moni () {
      this.t = setInterval((x)=>{
              if(this.now==5){
                this.now = 1
              }else{
                this.now++
              }
              
        },100)
    },
    stop(){
      this.nowcount++
      clearInterval(this.t)
      if(this.nowcount<4){
        this.t = setInterval(()=>{
              if(this.now==5){
                this.now = 1
              }else{
                this.now++
              }
              
        },100*this.nowcount)
        setTimeout(()=>{
            this.stop()
        },2000)
      }
        
    }
    
  }
}
</script>
<style scoped>
.chooselei{
  border: 10px solid black;
}
</style>