Vue.js 倒数计时器偶尔会跳过

Question

I have a vue.js countdown timer as follows:

countdownTimer() {
            // exit method if it is active
             if(this.isCountdownActive == true && this.gameState.round === round) return;
             // first time set true
             this.isCountdownActive = true
             this.countdown = 10;
            var downloadTimer = setInterval(() => {
            if(this.countdown <= 0){
                clearInterval(downloadTimer);
                if (this.thisUser.captain) {
                        console.log("submit turn end")
                        Store.submitTurnEnd();
                        this.countdown = 10
                    }
                    // On exit interval, restart to false
          this.isCountdownActive = false
            }
            this.countdown -= 1
            }, 1000);
        },

I would say about 75% of the time it works perfectly, however, the other 25% of the time it glitches so that it submits the turn either twice or right away. How can I make sure that doesn't happen. I would like to make sure it only submits once and clears the interval asap.

Thanks for the help.

Answer 1

You most likely are calling the method multiple times.

Your early bailout condition

if(this.isCountdownActive == true && this.gameState.round === round) return;

You rely on this.gameState.round to be equal to round , if that's not the case you will register the countdown multiple times.