Question

我正在尝试使用VUE.js构建一个番茄钟计时器，下面是我遇到问题的相关代码片段。所以问题是clearInterval方法在这里似乎不起作用。

   data: {
        workTimeInMin: 1,
        breakTimeInMin: 1,
        timeRemainInMillisecond: 0,
        timerOn: false,
        rest: false
      },

      methods: {
        startOrStopTheTimer: function() {
          var self = this;
          var interval;
          if (this.timerOn){
            this.timerOn = !this.timerOn;
            window.clearInterval(interval);
            console.log("clearInterval");
          }else {
            this.timerOn = !this.timerOn;
            interval = setInterval(function(){
            console.log("123");
            if (self.timeRemainInMillisecond <= 0) {
              console.log("1");
              self.rest = !self.rest;
              if (self.rest) {
                self.timeRemainInMillisecond = self.restTimeInMin*60*1000;
              }else {
                self.timeRemainInMillisecond = self.workTimeInMin*60*1000;
              }
            }
              this.timeRemainInMillisecond = this.timeRemainInMillisecond-1000
            }, 1000);
          }
        },

You can find a live demo here.

在页面中，当我单击开始时，将调用Set Interval方法。然后我点击停止，它应该清除间隔，但它似乎不起作用，因为我打算。您可以检查控制台并轻松找到“123”不断弹出，表示间隔未清除。

在StackOverFlow中搜索一段时间后，我发现如果我在全局上下文中定义变量interval，它将按照我的意图工作。但我想知道为什么会这样。

我们将非常感谢您的帮助。提前谢谢！

Answer 1

你的问题是每次调用函数时var interval都是声明的新函数。因此，无法访问包含对您的间隔的引用的变量。

只需使用this.interval，该变量就会被添加到组件的数据部分。

你也可以使用这个mixin（插件）/看看它是如何工作的： Vue interval mixin

Answer 2

您可以清除setInterval和clearinterval。这是示例代码，请根据您的需要进行修改

if (val && !this.t) {
    this.t = setInterval(() => {
        location.reload()
    }, 10 * 1000)
} else {
    clearInterval(this.t)
}

Answer 3

我到达此页面是因为Vue仍然按照OP所述的奇怪方式处理setInterval。我尝试了上述所有修复程序，但发现只有两个选项有效：

全局范围内的时间间隔变量（如上所述，但不是理想的解决方法）
使用Vuex存储计时器并以常规Vuex方式处理它。

我很高兴发现使用Vuex可以绕过该问题，因为无论如何我都在使用Vuex。它并没有阐明为什么存在这个问题，但是它确实为我们提供了前进的途径，而很少做出牺牲。

因此，只需将变量声明为Vuex状态，使用突变来启动和停止计时器，一切便会按预期进行。

清除间隔在VUE

3 个答案: