3

Не могу сообразить до конца как отобразить на vue обратный таймер

Сам код:

(Часть компонента)

data(){
    return {
        interval: 30,
    }
},

methods: {
    timer() {
        setInterval(function () {
            if (this.interval > 0) {
                this.interval--
            }
        //... Как дальше отобразить не могу сообразить
        }, 1000);
    }
},

mounted() {
    this.timer();
}

Пытаюсь отобразить обратный отсчёт:

{{ interval }}
2
  • Зачем таймер в computed ? Таймер должен запускаться либо по событию какому-нибудь, либо при создании компонента, и выключаться при уничтожении (created/destroyed)
    – Vein
    8 ноя 2018 в 16:02
  • таймер собираюсь запускать при загрузки страницы mounted() 8 ноя 2018 в 16:07

2 ответа 2

8

В mounted запускается таймер методом startTimer(). Таймер запускается через setInterval с промежутком 1000 ms. В момент уничтожения компонента, или когда отсчёт дойдет до нуля, таймер нужно будет выключить, поэтому в методе destroyed помещаем stopTimer(). а в блоке watch отслеживаем текущее время, и если оно окажется равным нулю, то останавливаем.

new Vue({
  el: '#app',
  data: {
    currentTime: 5,
    timer: null,
  },
  mounted() {
    this.startTimer()
  },
  destroyed() {
    this.stopTimer()
  },
  methods: {
    startTimer() {
      this.timer = setInterval(() => {
        this.currentTime--
      }, 1000)
    },
    stopTimer() {
      clearTimeout(this.timer)
    },
  },
  watch: {
    currentTime(time) {
      if (time === 0) {
        this.stopTimer()
      }
    }
  },
})
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>


<div id="app">
  <p>{{ currentTime }}</p>
</div>

4

Спасибо за идею, вот Вам мой вариант таймера.

new Vue({
    el: '#app',
    data: {
        timer: 0,
    },
    watch: {
        timer: function (value, oldValue) {
            if (value <= 0) return
            if (++value == oldValue || oldValue <= 0) setTimeout(() => --this.timer, 1000)
        }
    }
})

Может кому-то пригодиться.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.