whileを使った繰り返し 決まった回数、コンソール上に現在時刻を表示させたい

Question

前提・実現したいこと

・1秒ごとに、コンソール上に現在時刻を表示する
・これを5回実行させたい

発生している問題・エラーメッセージ

下のコードだと、1秒ごとに5回、現在時刻がコンソール上に表示されてしまいます。

該当のソースコード

let i = 0;
function showTime(){
  console.log(new Date());
};

while(i < 4){
  setInterval(showTime, 1000);
  i++;
};

試したこと

ダメもとで 'i++' の場所を、setIntervalの前後に変えてみたが、意味なし。
正直、どこが違うのかよく分かりません。

補足情報（FW/ツールのバージョンなど）

Answer 1

オリジナルをいかすならこう

let i = 0;
function showTime(){
  console.log(new Date());
};

while(i <= 4){
  setTimeout(showTime, 1000*i);
  i++;
};

Comments

[maleon]

ありがとうございます。
元の形を活かすように助言いただけて嬉しいです

Answer 2

whileの実行自体が、速攻なので、
五つのsetIntervalがほぼ同時にスタートするからです。

5回だけ実行したいんですよね？
であれば、whileを使うと、逆にややこしい処理をしなくてはならなくなるので、下記でどうでしょうか？

let i = 0;
let timer = null;
function showTime(){
  console.log(new Date());
  if (i < 4) {
    i++;
  } else {
    if (timer) {
      // 五回実行されたなら、インターバルを解除する
      clearInterval(timer);
    }
  }
}

timer = setInterval(showTime, 1000);

あと、蛇足ですが、
while(){}と、function funcName(){}の末尾に、;は要りません。

Comments

[maleon]

miyabiさんの回答でピンときました！
私が書いたオリジナルは、showTime A, B, ...E というように、一瞬のうちに5回showTimeを実行、それを一秒ごとに繰り返させるコードになっていますね。
確かに、whileを使う場面では無かったと思います。
補足も含め、ありがとうございます！

Answer 3

while文を必ず使用する必要がないのであれば、以下のような方法ではどうでしょうか？

function countup(count) {
    if(count === undefined) {
        count = 0;
    }
    if(count > 5) {
        return;
    } else {
        console.log(count++);
        setTimeout(countup, 1000, count);
    }
}
countup();

関数countup()は関数内でsetTimeoutを呼び出し、引数に自分自身を渡す再起関数です。
変数countが0~4の間はcountの数字を足し続け、5になるとcount変数を0に初期化し、何もせずに処理を中断します。

Comments

[maleon]

ありがとうございます！
再起関数という方法もあるんですね。
勉強になります！

Answer 4

こちらの記事はいかがでしょうか？
https://techacademy.jp/magazine/5537

Comments

[maleon]

ありがとうございます！
よく確認させてもらいます。