Question

我正在玩VueJS并创建了一个简单的计数器。我想从setInterval()功能重置resetTimer()方法。但是，它不起作用。不知道我在这里失踪了什么。

＆＃13;

new Vue({
    el: '#app',
    data: {
        hours: 0,
        minutes: 0,
        seconds: 0,
        counter: 0
    },
    methods: {
        timer() {
                setInterval(() => {
                    this.seconds = this.timerFormat(++this.counter % 60)
                    this.minutes = this.timerFormat(parseInt(this.counter / 60, 10) % 60)
                    this.hours = this.timerFormat(parseInt(this.counter / 3600, 10))
                }, 1000);
            },
            resetTimer() {
                clearInterval(this.timer())
            },
            timerFormat(timer) {
                return timer > 9 ? timer : '0' + timer;
            }
    }
})

＆＃13;

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Lean Vue</title>
  </head>
  <body>
    <div id="app">
      <p>{{ hours }} : {{ minutes }} : {{ seconds }}</p>
      <button @click="timer">Start</button>
      <button @click="resetTimer">Pause</button>
    </div>

    <script src="dist/bundle.js"></script>
  </body>
</html>

＆＃13;

Answer 1

因为this.timer()返回undefined。

试试这个

timer() { this.interval = setInterval(() => { this.seconds = this.timerFormat(++this.counter % 60) this.minutes = this.timerFormat(parseInt(this.counter / 60, 10) % 60) this.hours = this.timerFormat(parseInt(this.counter / 3600, 10)) }, 1000); }

并且

pauseTimer() { clearInterval(this.interval) }

Answer 2

为间隔计时器定义一个全局变量（在我的示例中为my_timer），然后您可以在重置操作中清除它：

new Vue({
    el: '#app',
    data: {
        hours: 0,
        minutes: 0,
        seconds: 0,
        counter: 0,
        my_timer :0
    },
    methods: {
        timer() {
                this.my_timer = setInterval(() => {
                    this.seconds = this.timerFormat(++this.counter % 60)
                    this.minutes = this.timerFormat(parseInt(this.counter / 60, 10) % 60)
                    this.hours = this.timerFormat(parseInt(this.counter / 3600, 10))
                }, 1000);
            },
            pauseTimer() {
                clearInterval(this.my_timer)
            },
            timerFormat(timer) {
                return timer > 9 ? timer : '0' + timer;
            }
    }
})

希望这有帮助。

new Vue({
  el: '#app',
  data: {
    hours: 0,
    minutes: 0,
    seconds: 0,
    counter: 0,
    my_timer:0
  },
  methods: {
    timer() {
      this.my_timer = setInterval(() => {
                                  this.seconds = this.timerFormat(++this.counter % 60)
      this.minutes = this.timerFormat(parseInt(this.counter / 60, 10) % 60)
      this.hours = this.timerFormat(parseInt(this.counter / 3600, 10))
    }, 1000);
  },
  resetTimer() {
    clearInterval(this.my_timer)
    this.hour=0
    this.minutes=0
    this.seconds=0
    this.counter=0
  },
  timerFormat(timer) {
    return timer > 9 ? timer : '0' + timer;
  }
}
        })

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Lean Vue</title>
  </head>
  <body>
    <div id="app">
      <p>{{ hours }} : {{ minutes }} : {{ seconds }}</p>
      <button @click="timer">Start</button>
      <button @click="resetTimer">Reset</button>
    </div>

    <script src="dist/bundle.js"></script>
  </body>
</html>

Answer 3

如果您想重置测量时间，只需自己设置值：

this.hours = 0;
this.minutes = 0;
this.seconds = 0;
this.counter = 0;

在这种情况下，您不需要clearInterval。

注意：setInterval和clearInterval与您自己的私有定义变量“counter”无关 - 所以您需要处理它。

如果您想暂停计时器：

clearInterval(this.timer())

这会再次调用timer（）方法。

我认为您想要保存返回的值，然后使用它来清除间隔，如下所示：

    timer() {
        this.intervalTimer = setInterval(() => {
            this.seconds = this.timerFormat(++this.counter % 60)
            this.minutes = this.timerFormat(parseInt(this.counter / 60, 10) % 60)
            this.hours = this.timerFormat(parseInt(this.counter / 3600, 10))
        }, 1000);
    },
    pauseTimer() {
        clearInterval(this.intervalTimer)
    },

从对象重置setInterval（）

3 个答案: