2つの問題：this.myMethodはaddEventListnerによって追加されたfunction-clickイベントではなく、ユーザーがクリックすると20回以上実行します

Question

vue.jsでタイマーを作成しようとしましたが、いくつか問題があります。これは私のmtehodsセクションです：

ここ

methods: {   
    saveRunningMethod() { 
     var runningData = { 
      duration: `${this.hour} : ${this.minute} : ${this.second}`, 
      username: this.$store.state.user.username 
     } 
     this.$store.dispatch('saveRunning' , runningData) 
     console.log(runningData); 
    }, 
    startTimer(){  
     this.isTimerStart = true; 
     var timer = window.setInterval(() => { 

      var e = document.getElementById("stopBtn") 
      e.addEventListener("click", function(){ 
       clearInterval(timer) 
       this.isTimerStart = false; 
       console.log("lets Save it") 
       this.saveRunningMethod() 
       }); 

      if(this.mSecond < 9) 
       this.mSecond +=1 
      else 
       this.mSecond=0 

      if(this.mSecond==9) 
       this.second +=1     

      if(this.second>59)     
       this.second=0 

      if(this.second==59) 
       this.minute +=1 

      if(this.minute>59) 
       this.minute = 0 

      if(this.minute==59) 
       this.hour +=1    

    },100); 

    } 
} 

あなたはこの写真で見ることができるように、私は私のストップボタンをクリックしたときに私のe.addEventListener("click", function(){タイマーを停止しますが、この方法は、多回実行思える、私にconsole.log 33回走る！何故ですか？私は私のstartTimer()メソッド内でこのメソッドを実行しthis.saveRunningMethod()が、私は"this.saveRunningMethod() is not a function"エラーを取得する：

私の他の質問は、このラインについてです！

最後に、setIntervalを使用してタイマーを作成しましたが、より良い解決策がわかっていれば、本当に感謝します。

UPDATE：私はありがとう

<div class="row p-2 m-3 mt-3"> 
     <div class="col-12 p-0 animated fadeInUp mt-3"> 
      <p class="text-center">Your last record was : 00:00:00</p> 
     </div> 
     <div class="col-12 p-0 animated fadeInUp mt-3"> 
      <h1 class="text-center timer"> 
       {{this.hour}}:{{this.minute}}:{{second}}:{{mSecond}} 
      </h1> 
     </div> 
    </div> 
    <div class="row p-2 mt-3" v-bind:class="[this.isTimerStart==false ? 'show' : 'hide']"> 
     <div class="col-12 p-0 animated tada text-center"> 
      <button class="btn-link timerImg" @click="startTimer()"> 
       <img class="img-fluid timerImg" src="../../static/timerStart.png" /> 
       <p>Start</p> 
      </button> 
     </div> 
    </div> 

    <div class="row p-2 mt-3" v-bind:class="[this.isTimerStart ? 'show' : 'hide']"> 
     <div class="col-12 p-0 animated tada text-center"> 
      <button id="stopBtn" class="btn-link timerImg"> 
       <img class="img-fluid timerImg" src="../../static/timerStop.png" /> 
       <p>Stop</p> 
      </button> 
     </div> 
    </div> 

私のHTML部分を追加します。

Answer 1

According to MDNが、これはwindow.setInterval()が何をするかです：

は、その関数への各呼び出しの間に一定の時間遅延して、繰り返し関数を呼び出します。

したがって、startTimer()メソッドが実行されると、100ミリ秒ごとにclickイベントリスナーが停止ボタンに追加されます。あなたがページをロードし、停止をクリックする前に5.4秒待つ場合

var timer = window.setInterval(() => { 

    var e = document.getElementById("stopBtn") 
    e.addEventListener("click", function() { 
     // This code will execute 33 times when the stop button is clicked. 
    }) 
    ... 
}, 100) 

：あなたはページをロードし、停止ボタンをクリックする前に、3.3秒待つのであれば、clickイベントリスナーがボタンに33回を追加されていますボタンを押すと、clickイベントリスナーがボタンに54回追加されます！

window.setInterval()の代わりにwindow.setTimeout()を使用してください。 According to MDN、これは以下のとおりです。

指定した遅延後にコードスニペットまたは関数を実行します。

つまり、window.setTimeout()は、指定した遅延後に1回だけ実行されるタイマーを作成します。

this.saveRunningMethod() is not a functionことを、あなたのコンテキストが addEventListener()に渡されたコールバック関数内で変更されたエラーについては

、そうthisの値は、ボタンそのものではなく、あなたのオブジェクトになります。これを避けるには、addEventListener()に矢印機能を渡すことができます。これは、（その矢印関数内で、thisの値は、オブジェクトのままになります）コンテキストが変更されないままになります：タイマーがみとめ回を実行している理由を、あなたのコードから

window.setTimeout(() => { 
    var e = document.getElementById("stopBtn") 
    e.addEventListener("click",() => { 
     this.isTimerStart = false; 
     console.log("lets Save it"); 
     this.saveRunningMethod(); 
    }); 
}, 100)