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

プロモーションが含まれています

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

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

jQuery関連記事

関連記事をもっとみる

一定時間ごとに繰り返し、タイマー処理をする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);

サンプルのsetIntervalsetTimeoutに変更しました。

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の部分にリダイレクトさせたいページを指定します。
その際に、クエリパラメーターを文字列結合で追加します。

コメント

タイトルとURLをコピーしました