setTimeoutとsetIntervalを理解しとこ。
setInterval の仕組みが、指定された関数の処理時間に関係なく指定されたインターバルで実行されるようになっているからです。これの何が問題かといいますと、サーバからのレスポンス待ちのときに次々とリクエストされてしまいサーバへの負荷に繋がってしまいます。
setTimeoutが数秒後に1度実行するのに対し、setIntervalは指定した秒数ごとに実行を繰り返します。
タイマーの繰り返しとして使う場合は
setInterval：処理開始時点から一定時間ごとに繰り返す
setTimeout：処理終了時点から一定時間ごとに繰り返す
処理の開始までに要する時間が異なります。setIntervalは1回分の動作にかかる時間がインターバルの時間を超えてしまうと不具合が起こるため、時間設定には注意が必要です。不具合が気になるなら、setTimeoutを使用しましょう。
setIntervalを使った繰り返し
setIntervalを使用して繰り返す場合の処理方法は、以下のとおりです。
<script>
let count = 0;
const countUp = () => {
console.log(count++);
}
setInterval(countUp, 1000);
</script>仕組みはsetInterval()だけで連続的に動きます。
setInterval(countUp, 1000);
これが全てです。countUp()を1000ミリ秒(1秒)ごとに繰り返します。
この場合以下のcountUp()関数
let count = 0;
const countUp = () => {
console.log(count++);
}
が繰り返す内容となります。変数countを0,1,2, …とカウントアップします。
setTimeoutを使った繰り返し
<script>
let count = 0;
const countUp = () => {
console.log(count++);
setTimeout(countUp, 1000);
}
countUp();
</script>こちらの仕組みはcountUp()関数を動かすことで繰り返すようにします。繰り返すようにするにはこの関数の中に
setTimeout(countUp, 15000)
をおくことで、再帰的に使うことで繰り返しを可能にします。
参考サイト