JavaScriptで正確なタイマーを作るためにしたこと

過去の記事でJavaScriptでインターバルタイマーを作りましたが正確なカウントダウンができていなかったため修正しました。

この記事は修正箇所と修正方法のアウトプットになります。

修正箇所

function cutStart(){
//他のコードは省略
  remaining_time = min*60+sec;
  timer1=setInterval("countDown()",1000);
}

function tmWrite(int){
//他のコードは省略
    remaining_time=remaining_time-1;
  }
}

なぜ正確にカウントダウンできなかったのか

function cutStart()のsetIntervalでcountDown()を1秒ごとに呼んでいますが、ブラウザが時間どうりに動かせない場合にカウントが遅れてしますから。

どう修正したか

remaining_timeには終了時間を代入し、tmWrite()ないで終了時刻から現在時刻を引いて残り時間を出した。

修正したコード

function cutStart(){
//他のコードは省略
  let time = new Date;
  let nowYear = time.getFullYear();
  let nowMonth = time.getMonth();
  let nowDate = time.getDate();
  let nowHour = time.getHours();
  let nowMin = time.getMinutes();
  let nowSec = time.getSeconds();
  nowMin = nowMin + min;
  nowSec = nowSec + sec +2;
  let remaining = new Date(nowYear, nowMonth, nowDate, nowHour, nowMin, nowSec);
  remaining_time = remaining.getTime();
}

function tmWrite(int){
//他のコードは省略
  let t = new Date();
  let dnumT = t.getTime();
  let diff2Dates = remaining_time - dnumT;
}

まとめ

終了時刻から現在時刻を引いたことによりブラウザでsetInterval()が遅れたとしても正確な残り時間を表示できるようになったと思います。

次はletとconstの使い方や、同じ記述を書かないなどdry原則を意識して修正していきたいと思います。

またアドバイスなどは暖かくお願いしますm(_ _)m

参考

経過時間（秒数）をリアルタイムに表示する方法 - JavaScript TIPSふぁくとりー