javasript入門ｶｳﾝﾄﾀﾞｳﾝﾀｲﾏｰ function呼び出し位置

Question

<script>
var countdown = function(due) {
	var now = new Date();

	var rest = due.getTime() - now.getTime();
	var sec = Math.floor(rest / 1000) % 60;
	var min = Math.floor(rest / 1000 / 60) % 60;
	var hours = Math.floor(rest / 1000 / 60 / 60) % 24;
	var days = Math.floor(rest / 1000 / 60 / 60 / 24);
	var count = [days, hours, min, sec];

	return count;
}

var goal = new Date();
goal.setHours(23);
goal.setMinutes(59);
goal.setSeconds(59);

var recalc = function() {
	var counter = countdown(goal);
	var time = counter[1] + '時間' + counter[2] + '分' + counter[3] + '秒';
	document.getElementById('timer').textContent = time;
	refresh();
}

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

functionは呼び出す前に定義しなければならないと書いてあるのですが、
recalcファンクション内にある、refresh();は定義されているrefresh関数の前に書かれています。しかも関数のなかにあるしよくわかりません。

どういうことでしょうか。

Answer 1

var recalc = function() { 
  ...
}

この中に記載されているrefresh();ですが、ここではrecalcの関数を定義しただけですので、実際にはまだ実行はされていません。

var recalc = function() {
    var counter = countdown(goal);
    var time = counter[1] + '時間' + counter[2] + '分' + counter[3] + '秒';
    document.getElementById('timer').textContent = time;
    refresh();
}
recalc();
var refresh = function() {
    setTimeout(recalc, 1000);
}

こういう順序にすると、recalc();の時点で関数refreshは定義されていないため、エラーとなります。

自分だったら、順序よく定義させるため、下記のように整理します。

var refresh = function() {
    setTimeout(recalc, 1000);
}
var recalc = function() {
    var counter = countdown(goal);
    var time = counter[1] + '時間' + counter[2] + '分' + counter[3] + '秒';
    document.getElementById('timer').textContent = time;
    refresh();
}
recalc();