Счетчик времени Vue.js

Question

Счетчик времени Vue.js

1

Я пытаюсь построить таймер с помощью Vue.js, и я хочу, чтобы он выводил оставшееся время.

new Vue({
    el: "#app",
    data: {
        timer: 25,
        message2: "",
        counter: false,
        interval: null
    },
    methods: {
        startTimer() {
            this.interval = setInterval(this.countDown(), 1000);
        },
        countDown() {
            if (this.counter === false) {
                var n = this.timer;
                this.counter = true;
            } else if (n > 0) {
                n -= 1;
                this.message2 = "You have " + n + "seconds left.";
            } else {
                clearInterval(this.interval);
                this.counter = false;
                this.message2 = "Your time is up!"
            }
        },

Но я не могу message2 каждый раз, когда Interval запускает функцию countDown(). На самом деле он не запускает функцию каждую секунду, а только один раз.

Yanek Yuk 09 июнь 2017, в 11:41

Источник

Теги:

javascript

vue.js

vuejs2

2 ответа

3

Вы должны передать функцию setInterval, но так как вы немедленно выполняете this.countDown, вы передаете результат этого вызова setInterval:

startTimer() {
  this.interval = setInterval(this.countDown(), 1000);
}

для передачи функции вместо ее вызова, оставьте ()

startTimer() {
  this.interval = setInterval(this.countDown, 1000);
}

Кроме того, я исправил некоторые ошибки в countdown() (например, определяя n в ветке if, но используя его в else if, поэтому он undefined там или изменил только локальное n, что не изменило бы this.timer...)

countDown() {
  var n = this.timer
  if (!this.counter) {
    this.counter = true;
  } else if (n > 0) {
    n = n - 1
    this.timer = n
    this.message2 = "You have " + n + "seconds left."
  } else {
    clearInterval(this.interval);
    this.counter = false
    this.message2 = "Your time is up!"
  }
},

Linus Borg 09 июнь 2017, в 08:08

0

спасибо, но после окончания таймера this.timer должен остаться таким, каким он был раньше. взятие var n = this.timer вне if усложняет больше, чем упрощает в этом сценарии. Создание объекта данных для счетчика кажется лучшей альтернативой.
Yanek Yuk 09 июнь 2017, в 11:15

Ещё вопросы

спасибо, но после окончания таймера this.timer должен остаться таким, каким он был раньше. взятие var n = this.timer вне if усложняет больше, чем упрощает в этом сценарии. Создание объекта данных для счетчика кажется лучшей альтернативой.

chriswa · Accepted Answer · 2017-06-09T07-33-00.000Z

Как указывали другие, вам необходимо передать вашу функцию в setInterval, а не вызывать ее и передать ее возвращаемое значение.

Кроме того, когда вы выполняете инструкцию n = this.timer, вы вызываете getter, который Vue настроил на this.timer и копировал очень неважное число 25 вашей переменной n. n затем выходит из области действия, когда функция возвращается, и ваша копия 25 потеряна. В следующий раз, когда ваша функция запустится (еще на секунду позже) n не определено. Это приводит к тому, что условие else освобождает интервал. Предложение elseif никогда не запускается.

Я думаю, что самое маленькое изменение в работе с вашим кодом будет заключаться в том, чтобы продвинуть n чтобы жить в ваших данных: добавьте n: undefined, к вашим данным: {}, чтобы его можно было отслеживать Vue, а затем заменить все ваши применения n на this.n

Как только вы начнете работать, я бы рекомендовал упростить некоторые вещи:

установка this.n = this.timer вероятно, должно быть сделано в startTimer
если вы установите this.interval = undefined когда вы очищаете свой интервал, this.counter становится избыточным, потому что вы можете просто проверить, является ли this.interval правдивым
вы можете включить message2 в "вычисленный"
вы можете добавить предложение if в startTimer, чтобы предотвратить добавление второго интервала, если уже есть один активный (например, если кто-то нажимает кнопку "запускать таймер" дважды до истечения таймера)