ストップウォッチやタイマーアプリを作るときに必要になるのがタイマー処理です。一定時間が経過したときに動作させたり、一定時間ごとに動作させるメソッドがJavaScriptには準備されています。
タイマー処理をするには
JavaScriptのタイマー処理には２つあります。「setInterval」と「setTimeout」です。
次の特徴があります。
- setInterval：一定時間ごとに処理を繰り返す。「clearInterval」で停止する。
- setTimeout：一定時間後に処理を１度だけ行う。「clearTimeout」で停止する。
何度も繰り返すsetInterval
//実行する関数
const hoge = () => {
console.log("これは何度も表示されます");
};
//hoge関数を１秒ごとに実行
setInterval(hoge, 1000);setIntervalには次の引数を指定します。
- 第一引数：実行する関数
- 第二引数：指定時間（ミリ秒）
const hoge = (arg) => {
console.log(arg + "は何度も表示されます");
};
//hoge関数に引数を渡して１秒ごとに実行
setInterval(hoge, 1000, "これ");引数がある場合には、第三引数以降に書きます。
const hoge = () => {
console.log("この書き方は正しくありません");
};
//hoge()と書くのは間違いです。
setInterval(hoge(), 1000);第一引数の関数に「（）」をつけるとうまく動きません。
「setInterval」は一定時間ごとに動作し続けます。設定したタイマーを停止させるには「clearInterval」を使います。
「setInterval」は、タイマーを識別するための０ではない正の整数を返します。この識別子を「clearInterval」に渡せばタイマーが止まります。
const hoge = () => {
console.log(" これは表示されません ");
};
const timerId = setInterval(hoge, 1000);
//タイマーを停止
clearInterval(timerId);１度だけのsetTimeout
基本的な書き方は「setInterval」と同じです。
const fuga = () => {
console.log("これは５秒後に１度だけ表示されます");
};
//fuga関数を５秒後に１度だけ実行
setTimeout(fuga, 5000);第二引数に指定したミリ秒後に第一引数の関数が１度だけ実行されます。
const fuga = () => {
console.log("これは表示されません");
};
const timerId = setTimeout(fuga, 5000);
//タイマーを停止
clearTimeout(timerId);「clearTimeout」に識別子を渡すとタイマーが停止します。
const fuga = () => {
console.log("これは何度も表示されます");
//fuga関数を１秒後に実行
setTimeout(fuga, 1000);
};
//fuga関数を実行
fuga();「setTimeout」は１度だけ実行しますが、繰り返し実行させることもできます。
繰り返したい関数内に「setTimeout」を書き、第一引数にその関数を指定することで「setInterval」のような動作をさせることができます。
setIntervalとsetTimeoutの違い
一定時間ごとに繰り返したいときは「setTimeout」でも「setInterval」でも実現できます。
この２つ違いは何でしょうか？
- setInterval：処理が終わってなくても、指定時間になれば処理を行う。
- setTmeout：処理が終わったあとに、指定時間になれば処理を行う。
setIntervalでは、実行する処理に指定時間以上がかかる場合は不具合が生じる可能性があります。
setTimeoutでは、「タイマーの指定時間＋処理時間」が 処理間隔になるので、タイマーの繰り返し時間に精度が必要な場合はおすすめできません。
