jQueryのsetTimeoutを使って一定時間経過後にページをリロード・リダイレクトする

jQueryのsetTimeoutを使って一定時間経過後にページをリロード（再読み込み）・別ページへリダイレクトする方法と、setIntervalとの違いや、繰り返しのタイマー処理を止める、clearTimeoutも。

jQuery関連記事

• 

  【jQuery】pdfが存在するか、mimeタイプのバリデーションする

• 

  jQuery UIのsortableを使ってリストをドラッグで並び替える

• 

  jQueryのモーダルウィンドウを使ってフォームの確認画面を実装する

• 

  HTMLのcanvasタグとJavaScriptで円グラフの画像をつくる

• 

  bxSliderをカルーセルやコンテンツスライダーなど便利なサンプル5種

• 

  bxSliderの使い方と、オプションでのカスタマイズ方法

• 

  select・optionタグをjQueryで、プルダウンの選択値を取得、変更する

• 

  jQueryでinput[type="file"]で画像アップロード時にプレビューを表示する

• 

  jQueryでrequiredの専用エラー文と文字数制限のバリデーションをつくる

一定時間ごとに繰り返し、タイマー処理をするsetIntervalの使い方

setIntervalは、一定時間が経過するごとに繰り返し、タイマー処理を実行します。

JavaScript

count = 0;
var countUp = function() {
  $('#result').html(count++);
}
time = setInterval(countUp, 1000);

See the Pen
Untitled by むぅ (@mugenweb)
on CodePen.0

setIntervalを使って1秒ごとにカウントアップする関数を作りました。
第1引数のcountUpが実行するタイマー処理を記述し、第2引数に時間指定をします。

・1秒後　→　1000
・1分後　→　60000
・1時間後　→　3600000

計算方法は60秒　×　60分　×　1000(ミリ秒から秒に直す)で算出できます。

一定時間経過後に一度だけ実行するsetTimeoutの使い方

JavaScript

count = 0;
var countUp = function() {
  $('#result').html(count++);
}
time = setTimeout(countUp, 1000);

サンプルのsetIntervalをsetTimeoutに変更しました。

setIntervalは、一定時間ごとに繰り返し、タイマー処理をするのに対し、
setTimeoutは、一定時間経過後に一度だけ、タイマー処理をします。

繰り返しのタイマー処理を止める、clearTimeout

setIntervalは、一定時間が経過するごとに繰り返し、タイマー処理を実行します。
ですが止まる条件が無いので、ずっとカウントし続けてしまいます。

そんなときは、clearTimeoutで繰り返しのタイマー処理を止めることができます。
上のサンプルのJavaScriptを下記に変更してみてください。
countが5より大きくなったタイミングで、処理が止まります。

count = 0;
var countUp = function() {
  if(count > 5){　
    clearTimeout(time);　
  }
  $('#result').html(count++);
}
time = setInterval(countUp, 1000);

一定時間経過後にリロード（再読み込み）する

JavaScript

$(function(){
  setTimeout(function(){
    location.reload();
  },3600000);
});

setTimeoutを使って、一時間後にページをリロード（再読み込み）します。

location.reload()と記述することで、ページのリロード（再読み込み）をします。
データの更新等で、定期的にページをリフレッシュしたい時に使えますね。

一定時間経過後にリダイレクトする

JavaScript

$(function(){
  setTimeout(function(){
    location.href = URL;
  },3600000);
});

上のコードをlocation.hrefに変更すると、別ページへリダイレクトできます。
URLの部分にリダイレクトさせたいページを指定します。
よくある「何秒後にページが移動します」みたいな感じで使えますね。

クエリパラメーターをつけてリダイレクトする

JavaScript

$(function(){
  setTimeout(function(){
    location.href = URL + "?code=123";
  },3600000);
});

リダイレクトさせたいページは、クエリパラメータをつけた状態でもリダイレクトできます。

上のコードのURLの部分にリダイレクトさせたいページを指定します。
その際に、クエリパラメーターを文字列結合で追加します。