setIntervalでミリ秒表示させたい。

Question

var count = 120;

setInterval(countDown, 1000);

function countDown() {
  count --;
  var minutes = Math.floor(count / 60);
  var seconds = count % 60;
  var display = `${minutes < 10 ? '0' : ''}${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
}

このような感じで、０埋めと秒数までは取得できるのですが、ミリ秒も取得したいです。
計算方法がわからずググってみたのですがDateオブジェクトのことばかり出てきて、わからなかったので質問させていただきました。

ご回答いただけますと大変助かります。

Answer 1

ご質問のコードではインターバルが1秒単位となっているので「setIntervalが指定インターバルを正確に刻む」という前提で残り時間の表示を計算するなら、ミリ秒単位は常に"000"という前提を置くはずであり、それを表示することに意味はないと思います。

一方「ハンドラーが実際に起動された時間により残り時間をミリ秒単位で表示したい」なら、Dateにより経過時間をミリ秒単位で求めるとよいと思います。

なお、MM:ss.mmmという特別なフォーマットにするためformatMillisという関数を定義してみました。
秒以下を浮動小数点数として扱いtoFixed(3)としてもよいのですが、どのみち秒と分を2桁で0埋めする必要があるので、それ用の関数f0を定義しています。

var startRest = 120*1000; // 初期の残り時間
var rest = startRest;

var startMs = +new Date();
setInterval(countDown, 1000);

function countDown() {
  var elapsed = +new Date() - startMs;
  rest = startRest - elapsed;

  var display = formatMillis(rest)
  console.log(display)
}

// ミリ秒をMM:ss.mmm (M=分,s=秒,m=ミリ秒)の形式でフォーマットする
function formatMillis(millis) {
  function f0(s, n) {
    s = "" + s;
    return "0".repeat(Math.max(0, n - s.length)) + s;
  }
  var t = Math.abs(millis);
  var ms = t % 1000;
  var sec = Math.floor(t / 1000) % 60;
  var min = Math.floor(t / 60000);
  return `${millis < 0 ? "-" : ""}${f0(min, 2)}:${f0(sec, 2)}.${f0(ms, 3)}`;
}

結果==>

01:58.985
01:57.969
01:56.969
...
00:01.965
00:00.949
-00:00.051
...

Comments

[MobileAppDevLov]

最高にわかりやすいです。ありがとうございます！
Dateオブジェクトから経過を取得する方法があったのですね。

ときにf0でやっている s = "" + s; とはどういう意味でありますか？
f0関数のやっていることはわかるのですが、中身が読めません????

[KSwordOfHaste]

引数は数値なのでそれを文字列へ変換する意図で""+sとしています。
文字列へ変換すると「数値を文字列として表現したとき何文字になるか」がlengthでわかりますね？
そこで、期待する桁数nに足りない分だけ先頭に"0"をくっつけるようにします。Stringには同じ文字列をN回連結してくれるrepeatメソッドがあるのでこれで"00..."というのを作っています。繰り返す数が0より小さくなると調子がわるいのでMath.max(0, n - s.length)で先頭の"0"を何文字くっつけるべきかを計算している・・・という感じです。

[MobileAppDevLov]

よくわかりました！！
丁寧に教えて頂きありがとうございます！

Answer 2

1秒=1000ミリ秒ですので、基本的にはこの単位換算を加えていくだけです。

/**
 * 例1
 */
// countの単位をミリ秒にして、
var count = 120000;
// 50ミリ秒につき、
setInterval(countDown, 50);
// 50ミリ秒減算
  count -= 50;
// 1000未満の端数が「1秒未満の残り時間（ミリ秒）」
  count % 1000;

/**
 * 例2
 */
// countの単位は秒のまま、
var count = 120;
// 50ミリ秒につき、
setInterval(countDown, 50);
// 50 ÷ 1000 = 0.05秒減算
  count -= 0.05;
// 1未満の端数が「1秒未満の残り時間（秒）」
  count * 1;

Comments

[MobileAppDevLov]

さっそくご回答いただきありがとうございます。

１０００ミリ秒 = 1秒ということで理解はしているのですが
function countDown() {
count --;
}
と定義しており、countを1ずつデクリメントしている状況にございます。
これをsetInterval(countDown(), 50)とし、count -= 50;とするには、どうしたらよいかわかりません。

この場合1秒を count = 1と定義している箇所の位を変更する必要があるということでしょうか？

低級な質問で申し訳ないのですが、ご返信いただけるとうれしいです。