从对象重置 setInterval()

Question

我正在玩 VueJS 并创建了一个简单的计数器。我想从 resetTimer() 函数中重置 setInterval() 方法。但是，它不起作用。不确定我在这里遗漏了什么。

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;
            }
    }
})

<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>

Answer 1

如果您想重置测量的时间，只需自行设置值即可：

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)
    },

Answer 2

因为this.timer() returns 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 3

为间隔计时器定义一个全局变量（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>

从对象重置 setInterval()

Reset setInterval() from object

javascript

vue.js

vuejs2