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

関連記事

jQueryにおけるcreateElement

jQueryでcreateElementに変わる関数は単純で、例えばvar dom = docume

記事を読む

【javascript】RGB⇔カラーコード変換ライブラリ

RGBをカラーコードに変換、または、カラーコードをRGBに変換したい場合が出てきたのでどういうも

記事を読む

【jQuery UI】タブの初期状態を選択するとエラーがでて失敗する

jQuery UIでタブをプログラム側から選択させるには以下のようなコードを書けばいい…といったこと

記事を読む

【HTML/jQuery UI】NumericUpDownを設置する【Spinner】

HTMLタグにNumericUpDownがないか探したのですがないみたいなのでそれが使えるようなもの

記事を読む

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

幅固定サイトでのスマホ回転時Webサイトの横幅を合わせる方法のメモ。 下記2点の設定が必要です。

記事を読む

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

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

記事を読む

【javascript】privateのメソッドからpublicなメンバを呼ぶ

javascriptでのクラス定義 javascriptではいわゆる正確なクラスは作れませんが、そ

記事を読む

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

はてなブックマークのボタンをページの読み込みが終わった後にjavascript(jQuery)で追加

記事を読む

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

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

記事を読む

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

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

記事を読む

【Laravel5】既存のDBからデータを取得して表示する

はじめに 今まで作ったWebサイトをLaravel5で見れるようにし

【C++/OpenCV】cv::Matの画像にインパルスノイズを付加する

OpenCVで画像にノイズを付け足したいと思って調べたところ、Pyth

Intel Corei7-7700TでHTC Viveの動作確認

はじめに HTC ViveというVRヘッドセットで遊んでみたのでその

【Python】フォルダ内のカッコ付き数字ファイルを一括でリネームするスクリプト

はじめに タイトルどおりなのですが、指定フォルダ内のファイルのファイ

OpenCV3.1のTracking APIでトラッキングを試す

はじめに 先日OpenCV3.1をopencv_contrib付きで

パソコンを複数台使う際便利なツール

はじめに 先日、機械学習用にGPUを積んだBTOパソコンを購入しまし

OpenCV3.1をopencv_contrib付きでVisual Studio2013でビルドしてインストールする

はじめに OpenCV3.1でトラッキングがしたいと思いインストーラ

→もっと見る

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