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()
    – Oliver
    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/[email protected]/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 you have read our privacy policy.

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