JavaScriptで一定時間ごとにページの自動リロードを行う
2019年一発目の記事投稿です。今年も当サイトのオウンドメディアをよろしくお願いいたします。ありがたいことに新年早々、コーディング作業に追われているところで、その時に使えそうなものをメモしておきたいと思います。今回はタイトルの通りなのですが、ページの自動リロードを一定時間ごとに行うものです。最近ではスポーツのリアルタイム実況サイトなどでよく見かける機能ですね。
コーディング作業中は基本的にGulpでいろんなタスクを走らせており、その中でもファイル更新のタイミングでローカルサーバーと連携したページの自動リロードなどを使っています。(参考記事「Gulp + Browsersyncを使ったブラウザ自動リロードでコーディング効率化を目指す」)
これも大変便利なのですが、使っているうちにメモリ消費量がかなり増えてきて、だんだんPCの動作が重たくなってくることもしばしばあります。。特に開発専用のPCではなく、出先で作業する場合などはあまりメモリを積んだPCでない場合もあるので、ストレスに感じていました。
とはいえ、いちいちブラウザのリロードを行うのも面倒、、ということで、JavaScriptでタイマーを設定したページの自動リロードを行うスクリプトを入れてみました。と言っても数行のコードで実装できてしまいます。
【javascript】
いかがでしょうか、このようにコーディング効率化目的で使うのもいいですし、実際に自動リロード機能として実装する時にも使えるのではないでしょうか。 (参考にさせて頂いたサイト) ブラウザを自動的にリロードするいくつかの方法
const timer = 60000 // ミリ秒で間隔の時間を指定 window.addEventListener('load',function(){ setInterval('location.reload()',timer); });「setInterval」は一定時間ごとに実行させる関数です。引数に実行させる関数と、間隔の時間をミリ秒で指定します。ただし、ページがロードされたイベントで実行させているため、実際には一定時間経過後に実行させる関数の「setTimeout」を使っても同じようになります。タイマーの時間は変数で保持させても、直接引数に指定してもどちらでもOKです。 ちなみに他のサイトにもあった情報によると、下記のHTMLのメタタグでも自動リロードが設定できるようですね。リロードまでの秒数を指定し、こちらではリダイレクト先のURLも直接指定できます。ただし、デバッグ目的でHTMLを編集するのはワークフロー上あまりよろしくないのでしょうか、、
<meta http-equiv="refresh" content="[秒数]; URL=[リダイレクトURL]">
いかがでしょうか、このようにコーディング効率化目的で使うのもいいですし、実際に自動リロード機能として実装する時にも使えるのではないでしょうか。 (参考にさせて頂いたサイト) ブラウザを自動的にリロードするいくつかの方法
sponserd
keyword search
recent posts
- レスポンシブ対応のインラインSVGを作成する
レスポンシブ対応のインラインSVGを作成する
- webpackで画像ファイルをバンドルしてCSSで読み込む画像をBase64エンコードする
webpackで画像ファイルをバンドルしてCSSで読み込む画像をBase64エンコードする
- メディアクエリを使わないレスポンシブコーディングを試してみる #3:コンテナクエリ
メディアクエリを使わないレスポンシブコーディングを試してみる #3:コンテナクエリ
- Vue.jsでStripe決済処理用のコンポーネントを作成する
Vue.jsでStripe決済処理用のコンポーネントを作成する
- GSAPのアニメーション進捗値取得とコントロールで円形のプログレスバーを作成する
GSAPのアニメーション進捗値取得とコントロールで円形のプログレスバーを作成する
- JavaScriptで再帰関数を使ってネストした配列の深さを調べる
JavaScriptで再帰関数を使ってネストした配列の深さを調べる
- MakeShopのクリエイターモードでオリジナルデザインのECサイトを構築するときに使えるコード集
MakeShopのクリエイターモードでオリジナルデザインのECサイトを構築するときに使えるコード集
- GSAPでScrollTriggerプラグインを使ってスクロールに対応したアニメーションを実装してみる#3:スクロールで固定表示
GSAPでScrollTriggerプラグインを使ってスクロールに対応したアニメーションを実装してみる#3:スクロールで固定表示
categories