JavaScriptのカウントダウンタイマーについて

Question

JavaScriptで、カウントダウンタイマーを作成しています。
わからないところが二つありましたので質問させて頂きます。

１、最後のrefreshはrecalcの{}の外でfunctionを使って記述していますが何故でしょうか。

２、何故最後の行でrecalc()を記述しなければいけないのでしょうか。

ご回答お待ちしております。宜しくお願い致します。

function recalc() {

			let counter =  countdown(goal);

			const time = `${counter[0]}日${counter[1]}時間${counter[2]}分${counter[3]}秒`;
			
			document.getElementById('birthday').textContent = time;
			
			refresh();
		}

		function refresh() {
			setTimeout(recalc,1000);
		}
		
		recalc();

コード全体

<script>
		"use strict"

		function countdown(due){
			const now = new Date();

			const reset = due.getTime() - now.getTime();

			const sec  = Math.floor(reset/1000)%60;
			const min = Math.floor(reset/1000/60)%60;
			const hour = Math.floor(reset/1000/60/60) % 24;
			const day = Math.floor(reset / 1000 / 60/ 60 / 24);
			
			const count = [day,hour,min,sec];

			return count;
		}

		let goal = new Date(2020,12,6);
		
		function recalc() {

			let counter =  countdown(goal);

			const time = `${counter[0]}日${counter[1]}時間${counter[2]}分${counter[3]}秒`;
			
			document.getElementById('birthday').textContent = time;
			
			refresh();
		}

		function refresh() {
			setTimeout(recalc,1000);
		}
		
		recalc();
	</script>

Comments

[sousuke]

１、最後のrefreshはrecalcの{}の外でfunctionを使って記述していますが何故でしょうか。
最後のrefreshとは何行目のことですか？またrecalcの{}の内でfunctionを使わない記述というものを
質問者さんがお持ちならそれその考え、コードを書いたほうがいいと思います。

[kaji120]

最後のrefreshとは、setTimeoutのところです。

[kei344]

コードの出典を質問文に追記してください。

Answer 1

１、最後のrefreshはrecalcの{}の外でfunctionを使って記述していますが何故でしょうか。

そんなに深い意味はないのでは。recalc内でsetTimeout(recalc,1000)してもちゃんと動きます。再帰的な呼び出しコード記述を避けたかったのか、refresh()を他の箇所で使いたい布石なのか。

２、何故最後の行でrecalc()を記述しなければいけないのでしょうか。

最後のrecalc()を削除して実行すればすぐわかりますが、カウントダウン自体が実行されません。
関数は定義しただけでは実行されません。どこかでコールしないと。

Comments

[kaji120]

ご丁寧に有難うございます！
非常に分かり易かったです。