【JavaScript】文字列の検索をしたい（includes/indexOf）
takahide
初心者がITを楽しむブログ
【JavaScript】タイマー機能で●秒後に実行したい（setTimeout/setInterval）
takahide
おはようございます。タカヒデです。
本日は、「JavaScriptにおける、『タイマー機能』及び、『setTimeoutメソッド』『setIntervalメソッド』」を紹介します。
具体的には、「●秒後に実行したい」とか、「●秒間隔で実行したい」とか…
そんな要望を叶えるためのメソッドですね。
こんな人にオススメ
- JavaScriptにおける『タイマー機能』が理解できない
- 『setTimeoutメソッド』『setIntervalメソッド』の記載方法を知りたい
ぜひ本記事を参考にしてください。
●秒後に実行（setTimeoutメソッド）
まずは、「●秒後に処理」を実行する場合のメソッドです。
この時には『setTimeoutメソッド』を使用します。
まずは記載方法です。
//記載方法
setTimeout(実行したい処理,指定時間)ここで記載する指定時間の秒数は「ミリ秒」で記載します。
つまり「1000ミリ秒=1秒」となることに注意が必要です。
以下の記載例も見ていきましょう。
let one = () => {
console.log("1秒");
};
let two = () => {
console.log("2秒");
};
let three = () => {
console.log("3秒");
};
setTimeout(one, 1000);
//実行結果：1秒
setTimeout(two, 2000);
//実行結果：2秒
setTimeout(three, 3000);
//実行結果：3秒
この実行結果だけ見ても、何秒後に実行したのかよくわからないですよね。
↓に実際のコンソール画面を載せています。
時間経過のたびに処理が実行できていることが分かりますね。
この『setTimeoutメソッド』は指定した時間が経過すると処理が終了となります。
●秒間隔で実行（setIntervalメソッド）
続けて、「●秒間隔で処理」を実行する場合のメソッドです。
コチラは『setIntervalメソッド』を使用します。
記載方法を見ていきましょう。
//記載方法
setInterval(実行したい処理,指定時間)こちらも秒数は「ミリ秒」で記載するため、「1000ミリ秒=1秒」となることに注意が必要です。
以下が記載例です。
let two = () => {
console.log("2秒");
};
setInterval(two, 2000);
//実行結果：2秒
コンソール画面も見てみましょう。
『setIntervalメソッド』は指定した間隔で処理を繰り返します。
ここでは2秒、4秒、6秒と繰り返し処理が継続されていることが分かります。
「setTimeout」「setInterval」で引数の指定
『setTimeoutメソッド』『setIntervalメソッド』では引数を指定することもできます。
この言葉だけではよく分からないですね。
実際の記載例を見ると理解できるかと思います、
ここでは引数を指定することで、2秒、4秒ごとに指定されたログを表示させています
//記載方法
setTimeout(実行したい処理,指定時間,引数)以下が記載例です。
let test = (timeText) => {
console.log(timeText);
};
setTimeout(test, 2000, "2秒");
setTimeout(test, 4000, "4秒");引数の中に、2秒、4秒というテキストを記載しています。
実際のコンソール画面でもそれぞれに指定したメッセージを表示できています。
まとめ
以上が「JavaScriptにおける『タイマー機能』について、『setTimeoutメソッド』『setIntervalメソッド』」でした。
まとめ
- setTimeoutメソッド：●秒後に処理を実行
- setIntervalメソッド：●秒間隔で処理を実行
この記事が誰かの参考になれば幸いです。
お疲れさまでした。
ABOUT ME
通信会社の企画職で働く30代
非エンジニアでありながら半分趣味でITエンジニアリングやプログラミングを学習中
IT初心者が楽しいと思えるように発信することを目指しています
↓Xもやっているのでフォローしてね
