【javascript/jQuery】Progressbarで処理の進捗状況を表示する

公開日: : JavaScript/jQuery

スポンサーリンク

jQuery UIでProgressbarを使う

処理経過を表示する場合プログレスバーにより提示させるという方法があります。

progressbar_sample
↑Windowsで何かコピーしたときに出てくるダイアログ

ただ、HTMLやjavascriptにはデフォルトでそのようなバーは存在していません。プログレスバーを表示するにはjQuery UIなどのライブラリ、プラグインなどを使用するしかないです。今回はjQuery UIを使って進捗状況を表示させようと思います。
ただ、javascriptでマルチスレッドは出来ないので重い処理の進捗を提示したい場合は一工夫が必要なようです。

jQuery UIでProgressbarの設置

とりあえずjQuery UIでprogressbarを表示させます。jQuery UIのページからダウンロードして貼り付けます。特に貼り付けについては言及しません。jQuery UIをセットしたらプログレスバーを設置します。サンプルコードを参考に以下のようなコードを記述します。

$(function(){
	//プログレスバーの生成
	$("#progress").progressbar({
		value: 40,
		max: 100
	});
});
<div id="progress"></div>

最大値100で現在40の値を設定して表示させます。progressというid名の要素にプログレスバーを用意させます。

↑こんな感じになります。

重い処理の進捗を表示する

javascriptはシングルスレッドなので何か処理中に他の処理をやらせるということはできないです。クリックやタイマなどのハンドラは他に処理がされていて終わっていなければキューに貯まっていくようになっているようです。

プログレスバーの値をスクリプトから変更させるには次のようにします。例では値が40になるようにしています。

$("#progress").progressbar({
	value: 40
});

これを使って何らかの重い処理をしてその進捗を表示させようと思います。

$(function(){
	//プログレスバーの生成
	$("#progress").progressbar({
		value: 0,
		max: 100
	});
	//重い処理をさせる
	$("#probtn").click(function()
	{
		for(var i=0;i<100;i++)
		{
			//ここでプログレスバーを更新させる??
			$("#progress").progressbar({
				value: i
			});
		}
	});
});

forループ内でプログレスバーを更新させようとしていますが、これを実行させると一気に100%に到達したところだけ表示されます。理由としてはマルチスレッドでないので処理中は画面が更新されないからです。この場合は処理が短いのであまりわからないですが重い処理中ですと処理が終わるまで一切進捗が更新されないので何の意味もなくなってしまいます。

調べた限りjavascriptでは画面を更新する関数などは見当たらなかったのでいったん処理を区切るようにする必要があるようです

$(function(){
	//プログレスバーの生成
	$("#progress").progressbar({
		value: 0,
		max: 100
	});
	//重い処理をさせる
	$("#probtn").click(function()
	{
		var val = 0;
		var maxval = 100;
		setTimeout(function tmp()
		{
			//プログレスバーを更新しカウンタを増やす
			$("#progress").progressbar({
				value: val++
			});
			//条件を満たしたらもう一度処理
			if( val<maxval )
			{
				setTimeout(tmp,0);
			}
		},0);
	});
});

こんな感じにsetTimeoutをうまく駆使して毎回画面を更新させます。例では「tmp」という関数を作成して、それをtmpの中で(ある意味再帰的に)繰り返し実行させています。ただsetTimeoutは指定ミリ秒後に実行されるのでその間画面が戻るのでちゃんと進捗状況がわかるようになります。

以上ですが、javascriptで重い処理を実行するときはあらかじめsetTimeoutやsetIntervalなどで処理を分けて実行させられるように考えておいた方がよいです。

デモ

今までのものを設置しました。はじめのボタンは工夫なしのもので、2つ目のボタンはsetTimeoutの工夫を施したものです。



JavaScript Ninjaの極意 ライブラリ開発のための知識とコーディング (Programmers’ SELECTION)
ジョン・レシグ John Resig ベア・ビボー Bear Bibeault
翔泳社
売り上げランキング: 91,288

スポンサーリンク
Amazon
  • このエントリーをはてなブックマークに追加

関連記事

monacaでWebサイトをアプリ化

monacaを使ってWebサイトをアプリ化するための叩き台としてのメモです。 Webサイトのア

記事を読む

【jQuery/javascript】Tweetボタンを動的に設置する

Twitterボタンをブログやサイトに設置するとき読み込みに時間がかかってしまって困るといったことや

記事を読む

ニコニコ動画のURLリンクから外部プレイヤーのスクリプトに正規表現で置換する

ニコニコ動画の動画のアドレスを抽出して外部プレイヤー貼りつけソースのスクリプトに変換するソースです。

記事を読む

【jQuery】hasClass is not a functionエラー

jQueryでセレクタを使って取得してきたjQueryオブジェクトからその子要素をchildrenで

記事を読む

【javascript/jQuery】強制的にページをスクロールさせる方法

強制的にページをスクロールさせたいと思って調べていたのですが、なかなか思うようなものが見つからず困っ

記事を読む

【javascript】正規表現文字抽出簡易ツール

jQueryで作成した正規表現による文字抽出用スクリプトです。 (使い方) 「正規表

記事を読む

tableデータから棒グラフを描画できるjQueryプラグインTableBarChartを使ってみる

グラフを作成することについて 既存のtableデータから簡単に棒グラフの作成できるTableBar

記事を読む

PHPでページリロードをしようと思ったができなかったので

header("Location: ".$_SERVER); とすればページをリロードでき

記事を読む

【jQuery UI】Sliderのオプション変更やイベントを取得をする方法

jQuery UIを使ってスライダー(トラックバー)を作ります。その際に起こるイベントとしてスライダ

記事を読む

jQueryで要素にappendとafterを使って追加する

jqueryのappendは要素の末尾に指定要素を追加し、afterは要素の後に指定要素を加えます。

記事を読む

UWSCを使ったソフト自動立ち上げ【SoftEther VPN Server】

やりたいこと 最近SoftEtherという筑波大学発のベンチャー企業

【PHP】headerでContent-Typeを指定したのに効かない場合の対処法

PHPでサイトマップを作ろうと思い、XML形式のファイルを出力しようと

スマホ向け幅固定サイトの回転時の幅対応方法

幅固定サイトでのスマホ回転時Webサイトの横幅を合わせる方法のメモ。

【PHP】特定のURLからそのAtomやRSSのフィードを抽出する方法

特定のURLからRSSやATOMのフィードを抽出する方法をメモ。 流

フィード抽出ツール(RSS1.0、RSS2.0、atom)

任意URL サイト名 サイトURL RSS1.0

格安プラン限定レンタルサーバー機能比較表(2016年)

はじめに  最近新しい共用サーバーをレンタルしようと思い調査およびそ

kindle unlimitedが便利だったのでお勧めの使い方など感想メモ

 kindle unlimitedというサービスが8/3からAmazo

→もっと見る

  • Author : ががんぼ
    プログラミングやWeb関係で気付いたことについてメモしていく予定。だいたいが備忘録ですが、自分でサンプルを作って動かしてみたりしています。
PAGE TOP ↑