今回は「setTimeoutとsetIntervalの違い」について簡単にまとめました。
2つとも似ている要素同士なので、是非違いを理解しておきましょう。
setTimeoutとsetIntervalの違いについて【JavaScript】
「setTimeoutとsetIntervalの違い」について。
1つずつサンプルプログラムを書きながら見ていきましょう。
setTimeoutについて
setTimeoutとは、一定時間後に特定の処理を行うタイマー処理のこと。
タイマー処理は繰り返されず、一回だけ実行されます。
サンプルプログラムはこちら。
const str = function() {
console.log('ヤッホー！');
}
setTimeout(str, 3000);
// →3秒後に「ヤッホー！」とブラウザに表示されます
consoleに「ヤッホー！」と表示させる関数strを用意。
そして、setTimeoutを使って3秒後に「ヤッホー！」と表示させるようにしました。
上記のコードを見てわかるように、setTimeoutは指定した時間後に1回だけタイマー処理を実行してくれます。
setIntervalについて
setIntervalは、一定時間ごとに特定の処理を繰り返すタイマー処理のこと。
よくトレーニングなどでも使う「インターバル」といった言葉をイメージすると分かりやすいかもしれません。
サンプルプログラムはこちら。
let num = 0;
let countUp = function() {
console.log(num++);
}
let id = setInterval(function () {
countUp();
if(num > 3) {
clearInterval(id);
}
}, 1000);
まずはnumといった変数に0の値を代入。
そして、numを1ずつプラスしていくcountUpといった変数をletで宣言します。
最後に、numの数値が3になるまで1秒ずつ、numの数値を1ずつプラスしていく関数idを定義。
3になるまで1秒のインターバルでカウントされ、数値が3になるとタイマー処理が終了します。
まとめ
以上が、「setTimeoutとsetIntervalの違い」でした。
そこまで2つの違いは難しくないので、是非理解しておきましょう。
