js ボタンクリック後にタイマーリセットしたい

Question

画面上に制限時間10秒を表示し、ボタンを押すとその制限時間がリセットされまた10秒カウントが始まる実装をsetTimeoutを利用してやりたいです。
現状は下記の通りです。setTimeoutでできなくて、setIntervalでとりあえずやってみましたが、これを作動させると最初は順調に0秒までカウント後停止します。
しかし、クリックボタンを押すと-1秒となります。さらにボタンを押すと−２と増えていきます。
アドバイスいただきたいです。よろしくお願い致します。

Comments

[int32_t]

ボタンをクリックしたときに実行されるコードも開示してください。

Answer 1

time変数の値を元に戻してないからです。

// ここでタイマーを定義しないと、クリアできなくなる
let countdown = null;
function testfunc() {
// クリック時も、値を戻す
time = 11;
// 処理が二重にならないよう、ボタン押下時にいったんタイマークリア
if (countdown) {
  clearInterval(countdown);
}
countdown = setInterval(function() {
  timer.textContent = '制限時間：' + --time + '秒';
  if(time <= 0){
    // カウントが終了したら、変数の値を戻す
    time = 11;
    clearInterval(countdown);
  }
},1000);
}

Comments

[退会済みユーザー]

ご回答ありがとうございます。
とてもわかりやすく教えて頂き、初期化が足りていないと痛恨のミスに気付きました。
コードまでご丁寧に書いていただいたので、ベストアンサーにさせて頂きます。

Answer 2

setInterval() が実行中ならそれをキャンセルする処理と、カウントダウンを再開始するときに変数 time を初期値に戻す処理が抜けています。

• let countdown はグローバル変数にする必要があるので、function testfunc() の外に出します。また、setInterval()実行中かどうかが判別できるようにcountdown は null などで初期化しましょう。
• testfunc() の冒頭で、countdown が null ではないなら clearInterval(countdown) します。
• testfunc() の冒頭で、time を11か何かに再設定します。
• testfunc() 内の既存の clearInterval() の直後で、countdown を null にします。

Comments

[退会済みユーザー]

ご回答ありがとうございます。
文での詳しい説明して頂き勉強になりました。
ありがとうございました。