Почему моя функция обратного отсчета работает быстро? - PullRequest
Новая
       38

Почему моя функция обратного отсчета работает быстро?

2 голосов
/ 10 апреля 2020

У меня есть функция обратного отсчета в vue. js, которая обновляется слишком быстро.

Вот раздел данных 

data() {
        return {
            selected: [],
            countdown: timerLimit
        }

Ниже приведен метод обратного отсчета 

countdownTimer() {
        this.countdown = 60;
            var downloadTimer = setInterval(() => {
            if(this.countdown <= 0){
                clearInterval(downloadTimer);
                if (this.thisUser.captain) {
                        Store.submitTurnEnd();
                    }
            }
            this.countdown -= 1
            console.log(this.countdown)
            }, 1000);
        },

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

Спасибо за помощь.

Ответы [ 2 ]

1 голос
/ 10 апреля 2020

Это может помочь вам с другой переменной в данных: 

data() {
        return {
            selected: [],
            countdown: timerLimit,
            isCountdownActive: false
}

Метод: 

countdownTimer() {
        // exit method if it is active
        if(this.isCountdownActive == true) return;

        // first time set ttrue
        this.isCountdownActive = true

        this.countdown = 60;
            var downloadTimer = setInterval(() => {
            if(this.countdown <= 0){
                clearInterval(downloadTimer);
                if (this.thisUser.captain) {
                        Store.submitTurnEnd();
                }

                // On exit interval, restart to false 
                this.isCountdownActive = false
            }
            this.countdown -= 1
            console.log(this.countdown)
            }, 1000);
},
0 голосов
/ 10 апреля 2020

Вы можете попробовать это. 

new Vue({
  el: "#app",
  data: {
    counter: 5
  },
  methods: {
    countdownTimer: function() {
        let interval;

        interval = setInterval(() => {
            if (this.counter > 0) {
                this.counter = this.counter - 1;
            } else {
                clearInterval(interval);
                // Do whatever you want to do
            }
        }, 1000);
    }
  }
})

И часть шаблона 

<div id="app">
  <h2>Countdown:</h2>
  <h1>{{ counter }}</h1>
  <button v-on:click="countdownTimer">Start</button>
</div>
...