使用Vue按秒计数答案

【问题标题】：Using Vue to count up by seconds使用Vue按秒计数
【发布时间】：2018-06-05 06:54:09
【问题描述】：

我正在创建一个小型计时器 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) 时，它返回未定义。

有人知道我是如何错误地格式化组件的吗？

【问题讨论】：

您需要将setInterval 返回的值存储在某处。现在，您为它声明了一个变量，但是一旦函数结束，它就会超出范围。你会想要this.interval = setInterval(...) 和clearInterval(this.interval) 这样的东西。另外，不要每次都创建间隔；只在它不运行时创建它并在它运行时清除它。

标签： javascript vue.js vuejs2 vue-component

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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>

【讨论】：