ストップウォッチの数字が秒が切り替わるタイミングで一瞬消えてしまう

Question

前提・実現したいこと

単純なストップウォッチアプリを作成したのですが、一応は動くものの、秒数が切り替わるタイミングで数字がブレてしまいます。おそらく一瞬だけ表示されている数字が消えているのではないかと思います。（00:00:09:xxxから00:00:10:xxxに変わるときに左の00:00:0の部分が一瞬消えてしまっている）これを修正して、秒が変わるタイミングで時や分の数字が消えないようにしたいです。

該当のソースコード

var timer = document.getElementById('timer');
var start = document.getElementById('start');
var stop = document.getElementById('stop');
var clear = document.getElementById('clear');

var startTime = 0;
var elapsedTime = 0;
var memoriedTime = 0;

function updateTimeText() {
  var h = Math.floor(elapsedTime / 60000 / 60)
  var m = Math.floor(elapsedTime / 60000);
  var s = Math.floor(elapsedTime % 60000 / 1000)
  var ms = elapsedTime % 1000;

  h = ('0' + h).slice(-2);
  m = ('0' + m).slice(-2);
  s = ('0' + s).slice(-2);
  ms = ('0' + ms).slice(-3);

  timer.innerText = h + ':' + m + ':' + s + ':' + ms;
}

function countUp() {
  timerID = setInterval(() => {
    elapsedTime = Date.now() - startTime + memoriedTime;
    updateTimeText();
  }, 10);
}

start.addEventListener('click', () => {
  startTime = Date.now();
  countUp();
  updateTimeText();
});

stop.addEventListener('click', () => {
  clearInterval(timerID);
  memoriedTime = elapsedTime;
})

clear.addEventListener('click', function () {
  elapsedTime = 0;
  memoriedTime = 0;
  timer.innerText = "00:00:00:000"
})

なぜそのような挙動をするのか考えてみたのですが思い至りませんでした。何かヒントがあればご教授頂けると幸いです。よろしくお願いします。

Comments

[kei344]

HTMLも質問文に追記してください。

Answer 1

ms = ('0' + ms).slice(-3);ですが、10ミリ秒以下のタイミングでは01となってしまい、1桁不足します。ms = ('00' + ms).slice(-3);と、0を2つ補えるようにしましょう。

Comments

[maskmelon]

迅速な回答ありがとうございます。
確かに一桁足りなくなりますね、見落としていました。。