JavaScript:コールバック関数　🕰️setTimeoutについて

コールバック関数のいろいろ

1. setTimeoutについて
2. 無名関数を使ったコールバック関数
3. コールバック関数に引数を渡すパターン

⭐️コールバック関数でよく使用されるsetTimeoutについて以下にまとめました。

---

１. 🕰️setTimeoutについて

コールバック関数でよく使われるのが、setTimeoutです。
🔹setTimeout....時間切れになると関数または指定されたコードを実行するタイマー を設定します。
※MDN

🔸使用方法

setTimeout(処理内容,実行タイミング,引数があれば引数)

第１引数... [functionRef] オブジェクトの関数
第２引数... [delay] 何秒待つか（※ミリ秒で記載する！　　例：3秒後⇒3000）
第３引数... [param] ①のオブジェクトの引数

2.無名関数を使ったコールバック関数

では、3秒後に『こんにちは』と表示するコールバック関数を書いてみましょう
🔸setTimeoutの第１引数が無名関数の場合

setTimeout(function () {　//　　無名関数
  console.log('こんにちは');
},
  3000); //　　3秒後に『こんにちは』を表示する

第１引数の箇所に関数をそのまま入れてOK！
その昔基礎がわかっていなかった時はこれをみて、どこまでがどの関数なのか。。。が混乱していました。。。！
単純に関数をオブジェクトとして引数に渡していたのですね。

3.コールバック関数に引数を渡すパターン

では、引数があるパターンではどうなるでしょうか？
🔸setTimeoutに引数を渡したい場合

// ①コールバック関数を宣言
function hello(name) {
  console.log('Hello,' + name);
}
// ②setTimeoutの第３引数にコールバック関数の引数を渡す
setTimeout(hello , 3000, 'John');　//実行結果：3秒後に『hello John』と表示

こちらは第３引数以下に入れればOKです！
わかりやすいですね。

まとめ

コールバック関数でよく使われるsetTimeoutについてまとめました。
これでクリックした⚪︎秒後に⚪︎⚪︎したい！等のアクションに使えそうです💭

📕参考書
独習JavaScript 新版
🎥参考動画
【JS】ガチで学びたい人のためのJavaScriptメカニズム

---

✍️もりけん塾にてJavaScriptの基礎を学習中です☺️