снова начать интервал после его очистки

Question

Как я могу перезапустить Interval после его очистки? Я хочу, чтобы кнопку можно было нажимать один раз каждые 11 секунд. Я отключил ее, пока таймер> 0, после того, как он равен 0. Кнопка не отключена, поэтому она интерактивна. Я написал этот код, кажется, он работает, но после многократного вызова setInterval() таймер функции выходит из строя слишком быстро любые решения>

  data:{
    sTimer:11,
    sDisabled:true,
    asd:null
  },
  methods:{
        testing(){
        this.sTimer--;
      if(this.sTimer == 0){
        clearInterval(this.asd);
        this.sTimer= 11;
        this.sDisabled = false;
      }else{
        this.sDisabled = true;
      }
    },
    specialAttack(){
      setInterval(() => this.testing(), 1000)
    }
  },
  created(){
    this.asd = setInterval(() => this.testing(), 1000);
  }

<button class="specialAttack" :disabled="sDisabled" @click="specialAttack(); testing()">Special Attack {{ sTimer }}</button>

Answer 1

Здесь вы допустили несколько ошибок, поэтому, прежде всего, , чтобы достичь такой цели, вы должны использовать setTimeout вместо setInterval, потому что интервал обычно будет повторяться через определенное время, поэтому это может быть одной из возможных причин, по которой вас дважды вызывают , когда вы нажимаете кнопку. Затем вам нужно создать общую c функцию для этой причины и затем вызвать ее при создании документа вместо того, чтобы создавать два разных интервала и вызывать их по отдельности.

Таким образом, при соблюдении этих правил ваш окончательный код должен быть примерно таким:

HTML

<button class="specialAttack" :disabled="sDisabled" @click="specialAttack();">Special Attack {{ sTimer }}</button>

Javascript

data: () => {
    return {
      sTimer: 11,
      sDisabled: false,
      asd: null
    };
},
methods: {
    specialAttack() {
      clearTimeout(this.asd); // Or as you suggest in comments you can disbale it here with replacing this: this.sDisabled = true
      if (this.sTimer > 0) {
        this.asd = setTimeout(() => {
          this.sDisabled = true;
          this.sTimer -= 1;
          this.specialAttack();
        }, 1000);
      } else {
        clearTimeout(this.asd);
        this.sTimer = 11;
        this.sDisabled = false;
      }
    }
  },
created() {
    this.specialAttack();
}

Вот рабочая демонстрация: