クリア間隔がVUEで機能しない

Question

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

You can find a live demo here.

、私は間隔メソッドが呼び出されたセットを開始]をクリックしたとき。それから私は停止をクリックした、それは間隔をクリアするはずですが、それは私がそれを意図するように動作していないようです。コンソールを検査して、間隔がクリアされていないことを示す「123」がポップアップし続けることを容易に見つけることができます。

StackOverFlowでしばらく検索したところ、変数intervalをグローバルコンテキストに定義すると、意図したとおりに動作することがわかりました。しかし、なぜそうなのかを知りたい。

あなたのご協力をお待ちしております。前もって感謝します！

Answer 1

あなたの問題は、関数が呼び出されるたびにvar intervalが新しく宣言されていることです。したがって、あなたの区間への参照を保持する変数にはアクセスできません。

ちょうどthis.intervalを使用すると、変数がボンネットの下のコンポーネントのデータセクションに追加されます。

またそれがどのように動作するかを見て/このミックスイン（プラグイン）を使用することができます。 Vue interval mixin