みなさんこんにちは、現役エンジニアのサメハックです
未経験からWebエンジニアに転職し、
正社員として5年働いたのちフリーランスとして独立しました。
JavaScriptの解説シリーズです。
今回はsetTimeoutの使い方について学んでいきましょう!
駆け出しエンジニアや未経験の方、
また新入社員を指導する先輩社員にとっても
わかりやすいように解説していきます!
この記事を読むと・・・
- setTimeoutの使い方が理解できる
setTimeoutを使おう!
setTimeoutとは、
指定した時間が経過したあとに一度だけ処理を実行する関数です。
いわゆる遅延実行という処理だよ!
setTimeoutの構文:引数なし
setTimeout(関数名, ミリ秒);
関数名の後に()を付けないのがポイントだよ!
setTimeoutの構文:引数あり
setTimeout(関数名, ミリ秒, 引数1, 引数2 ,....);
通常の関数と引数の渡し方が異なるよ!
setTimeoutの構文:コールバック関数
setTimeout(() => {
// 処理
}, ミリ秒);
無名関数を渡してスコープ内で好きな処理が作成できるよ!
実際に動かしてみよう!
const greet = (name) => {
console.log("こんにちは、" + name + "だよ!");
};
// 関数 遅延 引数
setTimeout(greet, 1000, "サメハック");
console.log(1);
console.log(2);
console.log(3);
console.log(4);
console.log(5);
実際に動かしてみると、
1秒遅れて「こんにちは、サメハックだよ!」と出力されるのがわかります。
まとめ
- setTimeout関数とは、遅延実行するために使用される
- setIntervalsと違い、1度しか実行されない
- 関数名の後に()を付けない
- setTimeout(関数名, ミリ秒);
- setTimeout(関数名, ミリ秒, 引数1, 引数2 ,….);
- setTimeout(() => { // 処理 }, ミリ秒);
満足いただけたら、1クリックなのでSNSフォローしてもらえると嬉しいです🦈