Question

我正在创建一个小型计时器Vue组件。用户需要能够启动和停止该计时器。到目前为止，这是我的组件：

<template>
    <div>
        <a class="u-link-white" href="#" @click="toggleTimer">
            {{ time }}
        </a>
    </div>
</template>

<script>
    export default {
        props: ['order'],
        data() {
            return {
                time: this.order.time_to_complete,
                isRunning: false,
            }
        },
        methods: {
            toggleTimer() {
                var interval = setInterval(this.incrementTime, 1000);
                if (this.isRunning) {
                    //debugger
                    clearInterval(interval);
                    console.log('timer stops');
                } else {
                    console.log('timer starts');
                }
                this.isRunning = (this.isRunning ? false : true);
            },
            incrementTime() {
                this.time = parseInt(this.time) + 1;
            },
        }
    }
</script>

我切换isRunning变量以确定计时器是否正在运行。在第一次单击（播放）时，计时器开始并成功递增。

但是，在第二次单击（暂停）时，isRunning var切换回关闭，但clearInterval(this.incrementTime)未清除间隔并暂停计时器。当我插入该调试器，并通过控制台手动命中clearInterval(interval)时，它返回undefined。

是否有人对我如何错误地格式化我的组件有任何见解？

Answer 1

这是一个工作示例，涵盖了我在上面评论中提到的概念。这不是您的组件的精确实现，只是一个示例，向您展示它是如何工作的。

console.clear()
new Vue({
  el: "div",
  data() {
    return {
      time: 0,
      isRunning: false,
      interval: null
    }
  },
  methods: {
    toggleTimer() {
      if (this.isRunning) {
        clearInterval(this.interval);
        console.log('timer stops');
      } else {
        this.interval = setInterval(this.incrementTime, 1000);
      }
      this.isRunning = !this.isRunning
    },
    incrementTime() {
      this.time = parseInt(this.time) + 1;
    },
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>
<div>
  <a class="u-link-white" href="#" @click="toggleTimer">
    {{ time }}
   </a>
</div>

Answer 2

<template>
    <div>
        <a class="u-link-white" href="#" @click="toggleTimer">
            {{ time }}
        </a>
    </div>
</template>

<script>
    export default {
        props: ['order'],
        data() {
            return {
                time: this.order.time_to_complete,
                isRunning: false,
                interval: undefined // store the interval here
            }
        },
        methods: {
            toggleTimer() {

                if (this.isRunning) {
                    clearInterval(this.interval);
                    console.log('timer stops');
                } else {
                    this.interval = setInterval(this.incrementTime, 1000);
                    console.log('timer starts');
                }
                this.isRunning = !this.isRunning; // better to read
            },
            incrementTime() {
                this.time = parseInt(this.time) + 1;
            },
        }
    }
</script>

没有进一步的测试，我认为你的第一个间隔永远不会停止，因为指向它的指针只是在函数范围内。这就是为什么我将间隔移入数据对象，因为当第二次调用methoded时它是可用的。我希望它有所帮助

使用Vue按秒计数

2 个答案: