javascriptでの関数内の処理の順序について

Question

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
（例）PHP(CakePHP)で●●なシステムを作っています。
■■な機能を実装中に以下のエラーメッセージが発生しました。

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

関数の中での実行順序について。

var n = 0;
function countSecond() {
	n++;
	document.getElementById("sample1").innerHTML = n+"回目の2秒が経過しました。";
	countUp();

function countUp() {
		if (n > 3) {
			clearTimeout();
			document.getElementById("sample1").innerHTML = "お知らせを終了します。";
		} else {
			setTimeout('countSecond()',2000);
		}

countSecondの中の処理なのですが、
n++　→　sample1の文面変更　→　countUPの実行という順だと思うのですが、

処理が終了されるのはn=4となってcountUpが
実行される時だと思うので、
４回目の〜〜という表示までされるべきだと思うのですが、
N=3まででの処理で終わってしまいました。

私の考えている処理の順番が違うということなのでしょうか？

エラーメッセージ

該当のソースコード

javascript

ソースコード
<script>
var n = 0;
function countSecond() {
	n++;
	document.getElementById("sample1").innerHTML = n+"回目の2秒が経過しました。";
	countUp();

	function countUp() {
		if (n === 3) {
			clearTimeout();
			document.getElementById("sample1").innerHTML = "お知らせを終了します。";
		} else {
			setTimeout('countSecond()',2000);
		}
	}
}
</script>
<div id="sample1">
<button onclick="setTimeout('countSecond()',2000)">2秒ごとに3回お知らせします</button>
</div>

試したこと

ここに問題に対して試したことを記載してください。
if===3などとしてみて結果がどうなるか考察してみたりした。

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

ここにより詳細な情報を記載してください。

Answer 1

n=3の時に、countUp();が呼ばれると、

        if (n > 3) {  // 3 > 3 なので真
            clearTimeout();
            document.getElementById("sample1").innerHTML = "お知らせを終了します。";
        } else {

条件が成立し、お知らせを終了します。となりそうな？

間違えましたので、追記

document.getElementById("sample1").innerHTML = n+"回目の2秒が経過しました。";

から、

        if (n > 3) {
            clearTimeout();
            document.getElementById("sample1").innerHTML = "お知らせを終了します。";
        } else {

までがノータイムなので、n=4の表示が瞬間的に書き換えられているのだと思います。

Comments

[amineo]

たしかにそうですねw
ありがとうございます！

[Lhankor_Mhy]

ん？　あれ？　違うのか。
テストコードの方と勘違いしてました。もう少し考えて見ます。

[Lhankor_Mhy]

あれ？　解決した？　解決してないですよね？

[amineo]

あ、してなかったです。
すいません、下の方のn===3が間違ってました。
ノータイムということですが、
n=4になってからのinnerHTMLの処理と、clearTimeoutの処理が同時に行われるってことですか？

[Lhankor_Mhy]

あ、いえ、そうではなくて、このコードの clearTimeout() って、全く意味がないんですよ。
試しに削除して実行してみてください、普通に動きますよ。

なので、

「4回目の2秒が経過しました。」
↓　　ここが瞬間で切り替わる。
「お知らせを終了します。」

ということでして、
「4回目の2秒が経過しました。」は表示されているものの目にもとまらぬ速さで消えているのです。

[Lhankor_Mhy]

というか、厳密に言うと、おそらくDOMのリフレッシュ前にinnerHTMLが書き換えられているので、表示される前に消えている、という表現が正しそうです。

[amineo]

コンソールでやってみてわかりました！
ありがとうございます！

Answer 2

解決済みのところ、蛇足なコメントで恐縮ですが、Lhankor_Mhyさんの回答に補足します。
ブラウザのコンソールなどで結構なので、下記のコードを実行してみてください。
「4回目の2秒が経過しました。」のあと、「お知らせを終了します。」が瞬時に実行されていることがわかると思います。

(() => {
  var n = 0;
  var started = new Date();
  function countSecond() {
    n++;
    console.log(`処理開始から${Math.floor(((new Date()).getTime() - started.getTime()) / 1000)}秒後`, `${n}回目の2秒が経過しました。`);
    countUp();
  }

  function countUp() {
    if(n > 3) {
      console.log(`処理開始から${Math.floor(((new Date()).getTime() - started.getTime()) / 1000)}秒後`, 'お知らせを終了します。');
    } else {
      setTimeout(countSecond, 2000);
    }
  }

  setTimeout(countSecond, 2000);
})();

「4回目の2秒が経過しました。」が表示されることを人間の目で確認するには、「お知らせを終了します。」の表示を遅らせる

if(n > 3) {
  setTimeout(()=>{
    document.getElementById('sample1').innerHTML = 'お知らせを終了します。';
  }, 2000)
}

あるいは、別のDOMに表示させる

if(n > 3) {
  let sample1 = document.getElementById('sample1');
  let notice = document.createElement('div');
  notice.innerHTML = 'お知らせを終了します。';
  sample1.parentNode.insertBefore(notice, sample1.nextSibling);
}

のがよいかと思います。 (個人的な意見ですが)

Comments

[amineo]

コンソールでやってみたらわかりました！
ご丁寧にありがとうございます！