【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
  • このエントリーをはてなブックマークに追加

関連記事

consoledirimg

【javascript/jQuery】JSON形式のデータの表示確認をする

PHPであれば「var_dump」や「print_r」などでJSON形式のデータの中身が思い通りの者

記事を読む

AMI88_toycameramorigirl500-thumb-500xauto-3709

jThree.jsやThree.jsでcanvasの画面をキャプチャして画像にする方法

WebGLのライブラリであるThree.jsやそのラッパーライブラリのjThree.jsでcanva

記事を読む

Youtube-Image

YoutubeのURLリンクを外部プレイヤーのものに正規表現で置換する

Youtubeのアドレスを正規表現を使って抽出して外部プレイヤーのフレームに変換・置換するスクリプト

記事を読む

PAK86_atamakakaerujyosei20140125500-thumb-500xauto-4730

【jQuery UI】タブをクリックしたときのイベントでselectが使えない

jQuery UIは1.10のバージョンではタブをクリックしたときのイベントの名前が変わっているよう

記事を読む

application-javascript

javascriptにおけるfor文の書き方

1. for文とは ある条件が正しいときに処理を繰り返すというループを記述するための文です。 似

記事を読む

nc23924

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

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

記事を読む

jquery-icon

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

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

記事を読む

jquery-icon

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

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

記事を読む

PAK65_chikyuugitohon500-thumb-500xauto-3318

Canvasの画像をリサイズする簡単な方法【HTML5・javascript】

調べてみるとCanvasをリサイズするようなjavascriptの関数は存在しないようなので自前で作

記事を読む

51R1yxTfoLL._AA180_

AAアニメーション

javascriptでAAアニメーションしました。AAは以下のところから参照しました。(AAアニメー

記事を読む

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

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

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

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

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

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

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

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

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

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

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

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

TAKEBE055122558_TP_V
寝る前にスマホを見ると斜視になる可能性とその対策

はじめに  寝る前などスマホを横になりながら見続けると斜視になる可能

→もっと見る

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