ループ処理がうまくいかない、functionのreturnの使い方がわからない

Question

前提・実現したいこと

JavaScriptで、
window.prompt()
に入力された値から計算を行い、HTML上で１秒ごとに１秒減っていくカウントダウンタイマーを制作しようとしています。
しかし、functionの設計が甘いのか（returnがいまいちよくわかっていない。）、わかりませんが、うまくループできない＆そもそも計算をしていないという現象に陥っています。
function countdown()内の、return recalcでsecondに代入し(ここのやり方がわからない)、function refreshでsecondの値を１減らし...といったループができることを想定していました。

どこが原因でプログラムが動いていないのでしょうか。何度も見直しましたが、初心者故、結局わからずじまいで…
ご教授いただけたら幸いです。
ここのサイトを使うのは初めてかつ、人にプログラムを見てもらう、方法を尋ねるというのは初めてなので、拙い部分があったらごめんなさい。

該当のソースコード

            let minute = parseInt(window.prompt('何分測りますか')); 　//測りたい分数を入力
            let second = minute * 60;　//秒単位にする

            function countdown(){
                let recalc = minute;
                let min = Math.floor(recalc / 60); //分に直す
                let sec = Math.floor(recalc / 60 * 10); //余りを用いて秒に直す
                document.getElementById('min').textContent = 'min' ; //HTMLに分として表示
                document.getElementById('sec').textContent = 'sec' ; //HTMLに秒として表示
                console.log(minute);
                return recalc; //returnでsecondに再代入したいが、代入する方法がわからない。多分これのせいでプログラムが動かない。
            }

            function refresh(){
                second -= 1; //秒のカウントを１減らす
                setTimeout(countdown,1000); //１秒ごとに関数countdownを実行させる
            }

            while (second <= 0){
                refresh(); //0秒になるまで続ける
            }
            
            window.alert('終了')

Answer 1

うまくループできない＆そもそも計算をしていない

            while (second <= 0){
                refresh(); //0秒になるまで続ける
            }

ここで while の条件が「secondが0以下なら繰り返し」となっているので、second が0より大きいと一度も refresh() が呼ばれません。

---

            function refresh(){
                second -= 1; //秒のカウントを１減らす
                setTimeout(countdown,1000); //１秒ごとに関数countdownを実行させる
            }

setTimeout(countdown, 1000) は、countdown() を約1秒後に実行することを予約するだけで、countdown() の実行終了を待ちません。関数 refresh() は countdown() が実行されるより前に終了します。

---

現在のコードをできるだけ尊重するなら、以下のような感じになるでしょうか。

let minute = parseInt(window.prompt('何分測りますか')); 　//測りたい分数を入力
let second = minute * 60;　//秒単位にする
if (second > 0)
    setTimeout(countdown, 1000);

function countdown(){
    second -= 1;
    let min = Math.floor(second / 60); //分に直す
    let sec = second % 60; //余りを用いて秒に直す
    document.getElementById('min').textContent = min ; //HTMLに分として表示
    document.getElementById('sec').textContent = sec ; //HTMLに秒として表示
    if (second > 0)
        setTimeout(countdown, 1000);
    else
        window.alert('終了');
}

---

yambejpさんも書いてますが、setTimeout()はそんなに正確な時間で呼び出すわけではないので、正確にやるなら開始時刻と現在時刻の差をチェックするほうがよいです。

Comments

[saknfsh]

私が今回躓いた点や打開策など、細かくまとめて下さりありがとうございます。そもそもが初歩的なミスでしたね...functionの中にifを設けるのは考えが及ばなかったので、今後参考にさせていただこうと思います。
すごくすごく助かりました。ありがとうございました。m(_ _)m

Answer 2

jsでwhileループは同期処理なのでこの手の処理には向いていないかもしれません。
setIntervalなどでpromiseを利用してasync/awaitすると良いでしょう
またカウントダウン処理は時計を利用するようにしてください

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  let timerId;
  document.querySelector('#start').addEventListener('click',async()=>{
    clearInterval(timerId);
    let minute = parseInt(prompt('何分測りますか'));
    let second = minute * 60;
    const endtime=new Date().getTime()+minute*60*1000;
    await new Promise(resolve=>{
      timerId=setInterval(()=>{
        const t=new Date().getTime();
        if(t>=endtime){
          clearInterval(timerId);
          resolve();
        }
        second=parseInt((endtime-t)/1000);
        countdown(second);
      },100);
    });
    window.alert('終了');
  });
});
const countdown=s=>{
  let min = Math.floor(s / 60); //分に直す
  let sec = Math.floor(s % 60); //余りを用いて秒に直す
  document.getElementById('min').textContent = min;
  document.getElementById('sec').textContent = sec;
}
</script>
<input type="button" value="start" id="start">
<span id="min"></span>分
<span id="sec"></span>秒

Comments

[saknfsh]

ありがとうございます。使っている参考書が古いのかわかりませんが、参考書で用いられているコードをチラ見しながら書いたプログラムでしたので...
読んでて初めてみる書き方とかオブジェクトがあったので、yambejpさんが書いてくださったコードを元に更に勉強してみようと思います。

僭越ながら、私が書いたコードがなぜ動かないのかも教えていただければ幸いです。やはりreturnでsecondに代入が出いていないからでしょうか。

[yambejp]

> なぜ動かないのか

ちょっと「ここです」と指摘できるような単純なミスではなく、そもそもが無理筋な書き方をしている感じです。
私の全体の流れは、分数を決めた時点で最終時間を設定して、そこに至るまで0.1秒単位で問い合わせをしています。質問者さんのソースだとrefreshも何をしたいかわからないですし、whileも不適切です。setTimeoutを利用するならwhileではなく、コールバックの中で再度自分を呼び続ける必要があります。

Answer 3

どこが原因でプログラムが動いていないのでしょうか。

考え方です。
おそらく質問者さんは、whileループ内で表示更新して1秒待つ動作を繰り返し実行して最後にalert('終了')を実行したいのだと思いますが、JavaScriptに「処理中に1秒待つ」という命令は存在しないのでそのようなコードは基本的に書けません。
setTimeout(countdown,1000);は1000ミリ後にcountdown関数の実行を予約して即座に次の行以降の実行を行うという命令なので「処理中に1秒待つ」ことはできません。

ちなみに、Promiseとasync/awaitを使えば擬似的に「処理中に1秒待つ」ようなコードは書けますが、内容を理解せずに使うのはおすすめしません。

1秒ごとに何かをする単純なサンプルとして、1秒ごとにconsole.logで数字を表示するという例を示します。

// setTimeoutを使った書き方
// 初学者にも仕組みを理解できると思います

let count = 5;

function countdown(){
	count -= 1;
	console.log(count);
	if (count > 0) {
		setTimeout(countdown, 1000);
	}
}

setTimeout(countdown, 1000);


// async/awaitを使った書き方
// こっちのほうが直感的に見えるコードですが、
// 意味を理解せずに使うと意味が理解できない問題にぶち当たると思います

(async () => {
	const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));

	let count = 5;

	while (count > 0) {
		count -= 1;
		console.log(count);
		await sleep(1000);
	}
})();

Comments

[saknfsh]

ありがとうございます。setTimeoutはそのような動作をするのですね。setTimeoutを使ったコードは理解できましたが(そっかfunctionの中にifを組み込んでしまえばよかったのか...)、Promiseとasync/awaitに関しては今回の質問で初めて見たオブジェクトなので、今後勉強していこうと思います。ご回答ありがとうございました。m(_ _)m