【JavaScript】setTimeout関数で遅延実行しよう!

JavaScript

みなさんこんにちは、現役エンジニアのサメハックです

未経験から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フォローしてもらえると嬉しいです🦈

タイトルとURLをコピーしました