ユーザーがサイトを訪問してから1分程度滞在している場合、見込み顧客である可能性が高いためWeb上にユーザーを誘導するリンクや広告をポップアップ表示させたい。。。などなどの悩み解決に使えるsetTimeout。
他にもsetInterval () を使用しインターバルタイマーなどを作成したい場合などにも基本的なsetTimeoutを理解しておくと便利です。
そんなJavaScriptのsetTimeout を紹介していきます。

基本的なsetTimeout関数使用方法

setTimeout 関数は、一定時間が経過した後にコードを実行させたい時に使用する関数です。具体的には、何秒後や何分後かの時間を設定し、その時間が経過した後に処理する関数を設定していきます。

setTimeout 関数の書き方

基本的な setTimeout 関数の書き方は以下となります。

window. setTimeout ( 関数, delay 時間);

JavaScript では、最初のwindowを省略しても可能

setTimeout ( 関数, delay 時間(ミリ秒単位) );

早速実装

早速簡単なコードを書いてみましょう。

setTimeout ( function () { console.log ('Hello') }, 3000 )

上記コードでは3000ミリ秒つまり3秒後にコンソールに ‘Hello’ と表示されるコードです。

上記表示されているのがYoutube動画から確認できます。

次は関数の部分をもう少しカスタマイズしてalertを表示させてみましょう。

先程と同様のコードでalert…の部分のみ追加します。

setTimeout ( function () {
    //console.log(count); //comment out
    window.alert('Hello'); //ここもwindow.は省略可
}, 3000);

下の動画にて3秒後にwindow にalert が表示されているのが分かります。

setTimeout関数はポップアップを表示させたりするのに使えますが、デメリットとしては一度しか処理がされません。つまり、繰り返し行うには再度新たなsetTimeoutメソッドを処理しなくてはなりません。

繰り返しにtimeout を行いたい方はsetInterval関数がおすすめです。

次回はsetTimeout に似たsetInterval を紹介します。