オブジェクトからsetInterval（）をリセットする

私はVueJSで遊んでいて、簡単なカウンタを作成しました。 resetTimer()関数からsetInterval()メソッドをリセットしたいと思います。しかし、それは動作していません。私がここで何が欠けているか分からない。オブジェクトからsetInterval（）をリセットする

new Vue({ 
 
    el: '#app', 
 
    data: { 
 
     hours: 0, 
 
     minutes: 0, 
 
     seconds: 0, 
 
     counter: 0 
 
    }, 
 
    methods: { 
 
     timer() { 
 
       setInterval(() => { 
 
        this.seconds = this.timerFormat(++this.counter % 60) 
 
        this.minutes = this.timerFormat(parseInt(this.counter/60, 10) % 60) 
 
        this.hours = this.timerFormat(parseInt(this.counter/3600, 10)) 
 
       }, 1000); 
 
      }, 
 
      resetTimer() { 
 
       clearInterval(this.timer()) 
 
      }, 
 
      timerFormat(timer) { 
 
       return timer > 9 ? timer : '0' + timer; 
 
      } 
 
    } 
 
})

<script src="https://unpkg.com/vue/dist/vue.js"></script> 
 
<!DOCTYPE html> 
 
<html lang="en"> 
 
    <head> 
 
    <meta charset="UTF-8"> 
 
    <title>Lean Vue</title> 
 
    </head> 
 
    <body> 
 
    <div id="app"> 
 
     <p>{{ hours }} : {{ minutes }} : {{ seconds }}</p> 
 
     <button @click="timer">Start</button> 
 
     <button @click="resetTimer">Pause</button> 
 
    </div> 
 

 
    <script src="dist/bundle.js"></script> 
 
    </body> 
 
</html>

出典

2016-12-21 Md Mazedul Islam Khan

をお試しください：

new Vue({ 
    el: '#app', 
    data: { 
     hours: 0, 
     minutes: 0, 
     seconds: 0, 
     counter: 0, 
     my_timer :0 
    }, 
    methods: { 
     timer() { 
       this.my_timer = setInterval(() => { 
        this.seconds = this.timerFormat(++this.counter % 60) 
        this.minutes = this.timerFormat(parseInt(this.counter/60, 10) % 60) 
        this.hours = this.timerFormat(parseInt(this.counter/3600, 10)) 
       }, 1000); 
      }, 
      pauseTimer() { 
       clearInterval(this.my_timer) 
      }, 
      timerFormat(timer) { 
       return timer > 9 ? timer : '0' + timer; 
      } 
    } 
})

これは役立ちます。

new Vue({ 
 
    el: '#app', 
 
    data: { 
 
    hours: 0, 
 
    minutes: 0, 
 
    seconds: 0, 
 
    counter: 0, 
 
    my_timer:0 
 
    }, 
 
    methods: { 
 
    timer() { 
 
     this.my_timer = setInterval(() => { 
 
            this.seconds = this.timerFormat(++this.counter % 60) 
 
     this.minutes = this.timerFormat(parseInt(this.counter/60, 10) % 60) 
 
     this.hours = this.timerFormat(parseInt(this.counter/3600, 10)) 
 
    }, 1000); 
 
    }, 
 
    resetTimer() { 
 
    clearInterval(this.my_timer) 
 
    this.hour=0 
 
    this.minutes=0 
 
    this.seconds=0 
 
    this.counter=0 
 
    }, 
 
    timerFormat(timer) { 
 
    return timer > 9 ? timer : '0' + timer; 
 
    } 
 
} 
 
     })

<script src="https://unpkg.com/vue/dist/vue.js"></script> 
 
<!DOCTYPE html> 
 
<html lang="en"> 
 
    <head> 
 
    <meta charset="UTF-8"> 
 
    <title>Lean Vue</title> 
 
    </head> 
 
    <body> 
 
    <div id="app"> 
 
     <p>{{ hours }} : {{ minutes }} : {{ seconds }}</p> 
 
     <button @click="timer">Start</button> 
 
     <button @click="resetTimer">Reset</button> 
 
    </div> 
 

 
    <script src="dist/bundle.js"></script> 
 
    </body> 
 
</html>

出典

2016-12-21 09:43:30

しかし、私はそれが一時停止することを望んでいません。私はそれをリセットして再び0から始める –

はい、 'clearInterval'はそれをクリアします.. –

しかしそれはしません。 –

あなたが測定された時間をリセットしたい場合は、単に値を自分で設定します。

this.hours = 0; 
this.minutes = 0; 
this.seconds = 0; 
this.counter = 0;

あなたはこのケースでてclearIntervalを必要としません。

注：setIntervalとclearIntervalは、独自に定義された変数 "counter"とは関係ないので、それを処理する必要があります。

あなたはタイマーを一時停止する場合：

clearInterval(this.timer())

これは、再びタイマー（）メソッドを呼び出します。

私はあなたがそうのように間隔をクリアするために返された値を保存し、それを使用したいと思う：

timer() { 
     this.intervalTimer = setInterval(() => { 
      this.seconds = this.timerFormat(++this.counter % 60) 
      this.minutes = this.timerFormat(parseInt(this.counter/60, 10) % 60) 
      this.hours = this.timerFormat(parseInt(this.counter/3600, 10)) 
     }, 1000); 
    }, 
    pauseTimer() { 
     clearInterval(this.intervalTimer) 
    },

出典

2016-12-21 09:40:51

私はすでに自分でこれを試してみましたが、それは 'のsetIntervalを（）'をリセットすることはありません。それはちょうど私に非常に奇妙なように見える間隔を一時停止する –

しかし、あなたはそれが "間隔をリセットする"と言うあなたの期待は何ですか？時間、分、秒を再び0にしますか？それは別の問題です。自分で0に設定するだけです。 'this.hours = 0; this.minutes = 0; this.seconds = 0; this.counter = 0' –

私が意味したのは、間隔が0から再び開始されることです。 –

this.timer()のでリターンundefined。

、あなたは、リセットアクションでそれをクリアすることができ、インターバルタイマ（私の例ではmy_timer）のグローバル変数を定義し、この

timer() { this.interval = setInterval(() => { this.seconds = this.timerFormat(++this.counter % 60) this.minutes = this.timerFormat(parseInt(this.counter/60, 10) % 60) this.hours = this.timerFormat(parseInt(this.counter/3600, 10)) }, 1000); }

そして

pauseTimer() { clearInterval(this.interval) }

出典

2016-12-21 09:41:02

私はすでにこれを自分で試しましたが、決して 'setInterval（）'をリセットしません。それはちょうど私に非常に奇妙なように見える間隔を一時停止する –

オブジェクトからsetInterval（）をリセットする

答えて

関連する問題