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)