【JavaScript】setTimeout() の使い方

ユーザーがサイトを訪問してから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 メソッドがおすすめです。

次回はset timeout に似たset interval を紹介します。