Javascript 清除间隔不'；我不能在VUE工作

我正在尝试使用VUE.js构建一个Pomodoro计时器，下面是我遇到问题的相关代码片段。所以问题是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);
          }
        },

数据：{
工作时间最小值：1，
休息时间分钟：1，
TimeRemainin毫秒：0，
蒂梅隆：错，
其余：错
},
方法：{
开始或停止计时器：函数（）{
var self=这个；
var区间；
if（this.timerOn）{
this.timerOn=！this.timerOn；
窗口。清除间隔（间隔）；
控制台日志（“clearInterval”）；
}否则{
this.timerOn=！this.timerOn；
间隔=设置间隔（函数（）{
控制台日志（“123”）；
如果（self.timeremainMinimillSecond您的问题是每次调用函数时，
var interval
都是一个声明的新变量。因此，保存对您的interval的引用的变量是不可访问的

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

您也可以使用这个mixin（插件）/看看它是如何工作的：
您的问题是，每次调用函数时，
var interval
都是一个声明的新变量。因此，无法访问包含对间隔的引用的变量

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

您也可以使用这个mixin（插件）/看看它是如何工作的：
您可以清除setInterval和clearinterval。以下是示例代码，请根据需要进行修改

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

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

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

我来到这个页面是因为Vue似乎仍然以OP描述的奇怪方式处理setInterval。我尝试了上面的所有修复，发现只有两个选项有效：


间隔变量的全局范围（如上所述，小于理想的解决方法）
使用Vuex存储计时器，并以通常的Vuex方式进行处理

我很高兴发现使用Vuex可以绕过这个问题，因为我无论如何都在使用Vuex。它没有解释为什么会存在这个问题，但它确实为我们提供了一条前进的道路，而且几乎没有做出任何牺牲

因此，只需将变量声明为Vuex状态，使用突变来启动和停止计时器，所有操作都会按预期进行。
我来到这一页，因为Vue似乎仍然以OP描述的奇怪方式处理setInterval。我尝试了上述所有修复，发现只有两个选项可以工作：


间隔变量的全局范围（如上所述，小于理想的解决方法）
使用Vuex存储计时器，并以通常的Vuex方式进行处理

我很高兴发现使用Vuex可以绕过这个问题，因为我无论如何都在使用Vuex。它没有解释为什么会存在这个问题，但它确实为我们提供了一条前进的道路，而且几乎没有做出任何牺牲

因此，只需将变量声明为Vuex状态，使用突变来启动和停止计时器，所有工作都会按预期进行。
您意识到
var interval；
创建了值为
未定义的新变量。
？使用window.interval来设置值globally@dfsq我知道。那么间隔应该设置为
var interval=setInterval
在for循环的else部分。所以我想知道为什么我不能在这里使用
clearInterval
。你的
interval
变量的作用域是该方法，所以每次方法运行时你都会得到一个新的变量。我会将它的作用域设置到组件——将它放在
数据块中——而不是污染
窗口
使用globals。（这也将消除对
timerOn
变量的需要。）我发现This.interval将其设置为对象，而不是nodejs环境中的实际ID。因此我必须运行
clearInterval（This.interval.\u ID）
您意识到
var interval；
创建了值为
未定义的新变量
？使用window.interval设置值globally@dfsq我知道这一点。然后应该在for循环的其他部分将间隔设置为
var interval=setInterval
。所以我想知道为什么我不能使用
clearInterval
here.your
interval
变量的作用域为方法，因此每次方法运行时都会得到一个新的变量。我会将其作用域为组件，将其放入
数据块中，而不是用全局变量污染
窗口（这也将消除对
timerOn
变量的需要）我发现this.interval将其设置为对象，而不是nodejs环境中的实际ID。因此我必须运行
clearInterval（this.interval.\u ID）
这在2019年12月对我有效-我没有在
data（）{}中声明interval
节，但只是将我的间隔分配给了this.interval。将其添加到数据中使其停止工作。2019年12月，这对我起了作用-我没有在我的
data（）{}
节中声明间隔，而是将我的间隔分配给了this.interval。将其添加到数据中使其停止工作。