jQueryにおけるタイマー操作
前置き
本日のお題は、jQueryにおけるタイマー操作の方法です。
目次
- 一定間隔で繰り返し同じ処理をする
- 一定時間経過後に、一度だけ処理をする
- 繰り返し処理を止める
- 一定時間後に、繰り返し処理を止める
一定間隔で繰り返し同じ処理をする
一定時間ごとに繰り返し処理を行いたいときには、setInterval関数を使用します。
setInterval(function(){
// 繰り返す処理
}, 繰り返し単位)
繰り返し単位はミリ秒表記になります。
一定時間後に一度だけ処理をする
一定時間後に一度だけ処理をすれば良い場合は、setTimeout関数を使います。
setTimeout(function(){
// 行いたい処理
}, 実行タイミング)
繰り返し処理を止める
繰り返し処理を止める場合には、clearInterval関数を使います。
var timer = setInterval(function(){}, xxx)
clearInterval(timer)
ボタンを押すと繰り返し処理が止まる、というような設定の場合に使用します。
clearIntervalの引数で止めたい関数を指定するので、あらかじめ変数に代入しておく必要があります。
また、setTimeout関数で予定されている処理を取り消す場合には、cleartimeout関数を使用します。
一定時間経過後に、繰り返し処理を停止する
一定時間経過後に繰り返し処理を停止する場合には、setTimeout関数とclearInterval関数を組み合わせます。
例)
var timer = setInterval(function(){}, xxx)
setTimeout(function(){
clearInterval(timer)
}, xxxx)