JavaScript

【コールバック関数】JavaScriptのsetTimeoutに第3引数を設定して出力する方法

しの

はじめまして、しのです。 WEBデザインやプログラミング、SEO、ブログ術に関する記事を主に書いています。 ブログの月間PVは約40000PV、月間収益は5桁です。 SEOで検索上位1位を約50件獲得(2023年1月時点)。

JavaScriptのsetTimeoutで第3引数に文字列を設定してそれをコールバック関数として呼び出したいんだけどうまくいかない。これはどうやって設定すればいいんだろう?

今回の記事は上記のような疑問やお悩みに役立つ内容となっております。

ぶっちゃけ、

コールバック関数ってややこしいですよね

初心者の頃は中々その構造が理解できずに躓く人も多いのではないでしょうか。

https://twitter.com/bloo1485/status/1254933181209300992

setTimeoutはコールバック関数を使用した代表的なJavaScriptの組み込み関数(元から登録されている関数のこと)の一つですが、setTimeoutの使い方を併せて覚えておくとコールバック関数に関する理解がグッと深まるかもしれません。

まずは「さっさと表題の件を教えろー!」という声が聞こえてきそうなので早速見ていきましょう。

JavaScriptのsetTimeoutに第3引数を設定して出力する方法

では早速表題の件です。

以下のようにコードを書けばOK。

function hello(word){
    console.log(word);
    }
    
setTimeout(hello,3000,'こんにちは');

このように記載することでhello(word)の”word”にsetTImeoutの第三引数である「こんにちは」が渡り、3秒後にこんにちはと出力されるようになります。

よりスッキリまとめて書いてみる

上記の内容をよりスッキリとまとめると以下のようなコードになります。

setTimeout(function(hello){
    console.log(hello);
},3000,"こんにちは");

上記でもsetTimeoutの第三引数に文字列を入力して、「こんにちは」が仮引数であるhelloに渡り、そこからconsole.logで出力しているという構造です。

アロー関数に書き換えてみる

ではアロー関数で上記の内容を書き換えてみましょう。

setTimeout(hello =>console.log(hello),3000,"こんにちは");

アロー関数に書き換えればここまで短く事もできます。

一行で書くことが出来るのもアロー関数の魅力ですね。

setTImeoutの使い方

setTimeoutを使うことで「何秒後に関数を実行するか」を指定することが出来ます。

Javascriptの場合、記述したスクリプトを上から順番に実行しますが、setTimeoutを使うことで「敢えて時間をずらして実行」することが出来るわけですね。

基本的には第1引数に「呼び出したい関数」を指定し、第2引数に「何秒後に呼び出すか」を指定します。

例のコードを見てみましょう。

setTimeout(function(){
//処理内容を記述
console.log("こんにちは");
},3000);//3秒後に実行する

基本的には上記のような書き方となります。

setTimeoutをアロー関数で書いてみる

では上記の内容をアロー関数で書いてみましょう。

setTimeout(()=>{
//処理内容を記述
console.log("こんにちは");
},3000);//3秒後に実行する

setTimeoutで無名関数を使うとthisのスコープが変わる場合があるため、プロパティへの参照が上手くいかないこともあります。

そのため、thisのスコープが外れないアロー関数と組み合わせて使うと良いと思います。

まとめ

いかがでしたでしょうか。

setTImeoutは通常第2引数までしか使いますが、第3引数にコールバック関数を渡すことでよりスッキリと分かりやすいコードを書くことが出来ます。

コールバック関数もsetTImeoutもJavaScriptでは非常によく使いますので、是非使い方を覚えておきましょう。

というわけで本日の記事は以上です( ͡° ͜ʖ ͡°)

  • この記事を書いた人
  • 最新記事

しの

はじめまして、しのです。 WEBデザインやプログラミング、SEO、ブログ術に関する記事を主に書いています。 ブログの月間PVは約40000PV、月間収益は5桁です。 SEOで検索上位1位を約50件獲得(2023年1月時点)。

-JavaScript
-