javascriptでsetIntervalを使う場合にタイムラグを発生させないようにするにはどうしたらいいでしょうか？

Question

setIntervalを使って繰り返しを行う場合、次の繰り返しを行う最初にタイムラグが発生するのはなぜでしょうか？
これを回避するコードの書き方はありますか？

例えば・・
0.1秒ごとに1,2,3,4,5と数える動作を繰り返しする場合
画面には1,2,3,4,5,1,2,3,4,5・・・と表示されますが、1～5までは0.1秒ずつ数えますが、5から1に変わる時少しタイムラグが発生します。
タイムラグを発生させず、すべての数を数えるときは0.1秒ごとにできないものでしょうか？

---

コードは下記の通りです。
コンソールログに表示するのでjavascriptのみのコードとなります。

let i = 1;
const count = function(){
if( i > 5){
i = 1;
} else{
console.log(i);
i ++;
}
};

setInterval(count, 1000);

---

今回の質問の経緯につきましては、スライドショーでsetIntervalを使って5枚の画像を3秒ごとに自動再生する場合、5枚目から1枚目に変わる時に3秒の倍の6秒くらいかかりました。
5秒にすると10秒かかりました。

カウントする数と画像の枚数がおかしいのか画像が1枚余分に計算されているのかと思い、+1や▲1をしたりするなど比較をしてもダメなため、上記のような簡単なカウントを試してみた所、setIntervalの使い方が間違えているのか？又は追記すべきコードがあるのではないかと思い質問をさせていただきました。

---

どなたかお力を貸していただければ幸いです。
よろしくお願い致します。

Comments

[mazoku]

(自分も初心者なので人のこと言えませんが)ラグではなくコードのバグなのでは？
上記のコードですと1→2に代わるときは...→(1秒待機)→i出力→i++→(1秒待機)→...となりますが5→1に代わるときは...→(1秒待機)→i=1(1秒待機)→i出力→...となり1周分出力に余計な時間がかかっています。

[hoshinomi]

返信ありがとうございます。
タイミングがおかしいのかなと思いconsole.log(i);をifの外に書いたらうまくいきました。

Answer 1

console.log(i);をif文の外に書くことで、ラグがなくカウントされるようになりました。
ただ、その時は1～6までカウントされてしまうので
if文には　i >= 5　5以下と修正しました。

mazokuさんの待機という言葉が引っかかってもしやと思ってやることで問題解決することができました。
この度teratailに初めて投稿させていただきましたがすぐに問題解決することができ大変助かりました。

ありがとうございました。