jQueryでタイマー処理をする方法をサンプルコード付きで紹介!

jQueryではタイマー処理を実現するためにsetTimeout関数があります。タイマー処理を実装することで、一定時間遅らせて処理を実行するといったことが可能になります。この記事ではjQueryでタイマー処理をする方法をサンプルコード付きで紹介しています。

コンテンツ [表示]

  1. 1jQueryでタイマー処理をさせたい
  2. 2jQueryでタイマー処理をする方法

jQueryでタイマー処理をさせたい

タイマー処理を活用することで時間差をつけた遅延実行を実現することが出来ます。

例えば、画面がロードされて何秒間待機した後にポップアップを表示するなどの処理を実現することができ、WEBサイトの表現の幅を広げることができます。

この記事はsetTimeout関数を用いて、タイマー処理を実現していきたいと思います。

Photo byFree-Photos

jQueryでタイマー処理をする方法

それでは早速、jQueryでタイマー処理をする方法を紹介していきます。

setTimeout

setTimeout(func, timer)

setTimeout関数は2つの引数を持ちます。

第一引数のfuncには遅延実行させる関数を指定します。関数名を文字列で指定してもコールバック関数を指定してもどちらでも構いません。
第二引数のtimerには第一引数で実行させる関数を遅らせる時間を指定します。単位はミリ秒で指定しますので、1秒遅らせたい場合には1000を指定してあげます。

上記のように指定することで、第二引数で指定した秒数後に第一引数で指定した処理を1回だけ実行することができます。

では実際の使い方をサンプルコードで見ていきましょう。

index.js

$(function(){

  setTimeout(function(){
    console.log("処理を実行する");
  }, 5000);
  
});

setTimeout関数の第一引数にはコールバック関を指定し、その中でconsole.log関数を使ってコンソールに「処理を実行する」という文字列を出力する処理を記述しています。

第二引数には5000を指定しているので、待機時間は5秒です。

よって、画面が読み込まれた5秒後にコンソールに「処理を実行する」と出力することが出来ました。

【期間限定】全カリキュラム無料で提供中!

Qumeru

Qumeru[クメル]ではプログラミング学習が出来るカリキュラムを期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひカリキュラムをお試し下さい!

関連記事

【期間限定】全カリキュラム無料で提供中!

Qumeru[クメル]ではプログラミング学習の全カリキュラムを期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひお試し下さい!

目次

みぎさん
ライター

みぎさん

大阪府の現役システムエンジニアです。WEB制作やWEB開発、ライティングなど幅広く活動しております。 【言語/FW】HTML,CSS,Sass,JavaScript,jQuery,Vue.js,PHP,WordPress,Laravel,Java