javascript - 清除间隔在 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);
          }
        },

You can find a live demo here.

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

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

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

Answer 1

您的问题是，每次调用函数时，var Interval 都会被声明为新的。因此，无法访问保存间隔引用的变量。

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

您也可以使用这个 mixin(插件)/看看它是如何工作的: Vue interval mixin