jQueryを利用したsetTimeoutを紹介！setIntervalとは

システム
エンジニア

タイマー処理にはどんな種類がありますか？

プロジェクト
マネージャー

主に2種類あります。ここではsetTimeoutについて見ていきましょう。

JavaScriptのsetTimeoutとは？

setTimeoutとは、指定した秒数だけ処理の実行を遅らせることのできるJavaScriptのメソッドです。通常、JavaScriptの処理は上から順に実行されますが、setTimeoutを使うことで処理のタイミングをずらすことができます。

また、setTimeoutはJavaScriptに元々備わっているメソッドですが、jQueryと組み合わせて、遅延実行をより簡単に実装することも可能です。

jQueryとは？

jQueryとは、JavaScriptをより容易に記述できるようになるライブラリです。ライブラリには様々な追加機能が用意されていて、導入することで開発コストを削減できます。

jQueryは動作が軽く、機能が充実しているという特徴があります。また、対応ブラウザも幅広いため、非常に多くのWebサイトで利用されています。

本記事では、jQueryを利用したsetTimeout処理の使い方を解説していきます。

setTimeoutで処理を遅延実行する方法

それでは、setTimeoutの使い方を見ていきます。setTimeoutの基本構文は、以下のようになります。

setTimeout( 遅延実行したい処理, 遅延させる秒数(ミリ秒)

第一引数に実行したい処理を、第二引数にその処理を何秒遅らせるかを記述します。第一引数に指定された処理は、指定された秒数後に一度だけ実行されます。注意点として、ここで第二引数に指定する秒数の単位は「ミリ秒」となります。

setTimeoutで処理を遅延実行

setTimeoutで処理を遅延実行する例として、ページの読み込みが完了してから5秒後に「5秒経過」というアラートを表示するには、以下のように記述します。

$(document).ready(function(){
setTimeout(function(){ alert(“5秒経過”) }, 5000);
});

上記では、第一引数に「5秒経過」とアラート表示させる処理を、第二引数には5000ミリ秒を指定しています。

$(document).readyとは？

ページが完全に表示される前にJavaScriptの処理が実行されると、必要な画面の要素が未表示のため想定外の挙動となることがあります。jQueryでは、$(document).readyを使って以下のように記述することで、ページの表示が完了してから処理を実行できるようになります。

$(document).ready(function(){
//ここに処理を記述
}

setTimeoutで指定した関数を遅延実行

setTimeoutの第一引数に直接処理を記述せず、function関数を指定することも可能です。

var showAlert = function(){
alert(“5秒経過”);
}
$(document).ready(function(){
setTimeout(showAlert, 5000);
});

上記のように、showAlertという関数を別途定義し、setTimeoutの第一引数に指定することで、直接記述した場合と同様の動作をさせることができます。

setTimeoutで引数を持つ関数を遅延実行

引数を持つ関数を指定することも可能ですが、引数の記述方法に注意が必要です。実行したい関数の引数は、setTimeoutの第3引数以降に指定します。

var showAlert = function(message){
alert(message);
}
$(document).ready(function(){
setTimeout(showAlert, 5000, “5秒経過”);
});

上記では、遅延実行したいshowAlertという関数の引数を、setTimeoutの第3引数に指定しています。このように指定することで、ページ読み込みの5秒後に「5秒経過」と表示することができます。

setTimeoutの実行をキャンセルする方法

setTimeoutで指定された処理の実行を停止したい場合、cleatTimeoutというメソッドを使ってキャンセルすることができます。clearTimeoutの基本構文は以下のようになります。

clearTimeout( 停止したいsetTimeoutのid )

clearTimeoutの引数には、setTimeoutのidを指定します。このidの取得方法については以下で説明します。

setTimeoutは戻り値にidを返す

setTimeoutは、戻り値として固有のidを返します。setTimeoutで遅延実行をするだけの場合、戻り値を気にする必要はありません。ただし、setTimeoutをキャンセルしたい場合には、このidが必要となります。

例えば、showAlertという関数を5秒後に実行するsetTimeoutの戻り値を取得するには、以下のように記述します。

var id = setTimeout(showAlert, 5000);

clearTimeoutで実行をキャンセル

それでは、idを使ってsetTimeoutの実行をキャンセルしてみます。例として、上記で説明したページ表示の5秒後にアラートを表示するsetTimeoutをキャンセルするには、以下のように記述します。

$(document).ready(function(){
var id = setTimeout(function(){ alert(“5秒経過”) }, 5000);
clearTimeout(id);
});

上記のように記述することでsetTimeoutはキャンセルされ、ページが表示されてから5秒経っても、アラートは表示されなくなります。

setTimeoutの活用例

ここまで、setTimeoutの基本的な使い方を見てきました。処理を遅延実行させることのできるsetTimeoutを有効活用すれば、JavaScript処理の実行タイミングを調整することができます。

それでは、実際にどのような活用方法があるのか、以下に例を挙げて説明します。ここでも、jQueryとsetTimeoutを組み合わせて処理を記述していきます。

活用例1：ボタンをクリックして5秒後にアラートを表示する

jQueryでボタンがクリックされたことを検知してから、setTimeoutを使って処理を遅延実行させることが可能です。jQueryでクリックイベントを扱うには、on()というメソッドを使用します。

例として、ボタン要素をクリックしてから5秒後に「クリックされました」というアラートを出すには、以下のように記述します。

$(‘button’).on(‘click’, function(){
setTimeout(function(){ alert(“クリックされました”); }, 5000);
});

活用例2：ページが表示されてから3秒後に要素のclassを追加する

ページの要素のスタイルを動的に変更したい場合などは、あらかじめスタイルが定義されたclassを、jQueryのaddClass()を使って後から要素に付与することができます。

このaddClass()とsetTimeoutを組み合わせることで、ページが表示されてから3秒後にclassを追加するという動作をさせることができます。例として、div要素にclassを追加する場合は以下のように記述します。

$(document).ready(function(){
var id = setTimeout(function(){
$(‘div’).addClass(‘sample’)
}, 3000);
});

setTimeoutとsetIntervalの違いとは？

setTimeoutとよく似たメソッドとして、setIntervalがあります。このメソッドも処理のタイミングを指定することができますが、setTimeoutが処理を一度だけ実行するのに対し、setIntervalは処理を複数回実行させることができます。JavaScriptの実装の際には、これらの関数を混同しないよう、注意が必要です。

setIntervalとは？

setIntervalは、指定した秒数ごとに処理を繰り返し実行するメソッドです。setIntervalの基本構文は以下の通りです。

setInterval( ループ実行したい処理, ループ間隔の秒数(ミリ秒) )

setIntervalでは、clearTimeoutで処理をキャンセルするまで、何度でも処理が実行され続けます。処理を実行したい回数に応じて、どちらのメソッドを使うか判断する必要があります。

システム
エンジニア

一定時間に処理を繰り返すメソッドと一度だけ処理するメソッドがあるのですね。

プロジェクト
マネージャー

これらタイマー処理の特性を理解してより高度な処理を覚えていきましょう。

setTimeoutメソッドを正しく使おう！

本記事では、setTimeoutメソッドの使用方法や、類似のsetIntervalメソッドとの違いについて解説しました。

指定した秒数だけ処理を遅延実行させることのできるsetTimeoutは、処理のタイミングをずらしたいときに有用なメソッドです。更に、上記で挙げた例のようにjQueryと組み合わせて使うことで、より簡潔に処理を記述することができます。