お世話になります。
質問させていただきます。

const timeoutId = setTimeout(showTime, 1000);

のあとに

  i++;
  if (i > 2) {
    clearTimeout(timeoutId);

が来ると、1秒後に関数showTimeを実行するという命令を出したあとに
iに1を足し、if文の条件の判定という時系列になりますよね？

タイマーを止めるかどうか判定する前に1秒後に実行する命令が出てしまっているという
イメージになってしまうのですが、この理解で間違いないでしょうか？

妙に気持ち悪かったので順番を逆にしてみましたがエラーとなりました。

ただ、このエラーに関してはよく見てみたらconst timeoutIdと定義する前にclearTimeout(timeoutId);が出てくることになるのでそれはおかしいということに気づきました。

そうなると、タイマーを止めるかどうか判定した後に1秒後に実行する命令を出すかどうか決めるというイメージの時系列でコードを書くとなった場合、素人の私では考えつきませんし、このレッスンのコードの時系列の書き方しかないのかなとも思いました。

だらだらと書いてしまいましたが疑問点としましては、

今回の挙動をコードで書くにあたっては、私のイメージである「ifで判定してから1秒後に実行の命令を出す」場合でも動画のようなコードの時系列にならざるをえないのでしょうか？

また、今回のレッスンは「１秒後に実行」の命令が始動した後、即ifの判定に入り、trueになったので終了にしたいけれども既に命令が始動してしまっているので、命令をできるだけ早く中断もしくは取り下げするみたいなイメージで間違いないでしょうか？

大変分かりづらい内容の質問かと思いますが、ご教授いただければ助かります。
よろしくお願い致します。