清除间隔在 VUE 中不起作用

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

您可以在此处找到现场演示。

在页面中，当我单击开始时，将调用设置间隔方法。然后我点击停止，它应该清除间隔，但它似乎并没有像我预期的那样工作。您可以检查控制台，很容易发现“123”一直弹出，这表明间隔未清除。

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

非常感谢您的帮助。提前致谢！

原文由 Leonard Ge 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

只需使用 this.interval 变量将添加到引擎盖下组件的数据部分。

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

原文由 Reiner 发布，翻译遵循 CC BY-SA 3.0 许可协议