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

関連記事

【Three.js/jThree.js】カメラ内部パラメータを変更して視野などを変える

jThree.jsでカメラの内部パラメータを変更するのに手間取ったのでメモ。参考にしているjThre

記事を読む

【jQuery】クリックイベントでマウスホイールクリックを検知する

$("a").click(function(){ … }); によりクリックイベントを関連付け

記事を読む

【jQuery】hasClass is not a functionエラー

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

記事を読む

【Javascript】1つまたは複数のランダムな値を取得する

#shuffle1btn,#shuffle2btn{ padding: 4px 6px; }

記事を読む

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

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

記事を読む

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

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

記事を読む

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

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

記事を読む

【jquery】iframe内のスクロールイベント設定とスクロール量取得

ページ内に設置したiframeのスクロールイベントおよびスクロール量を取得したかったのでメモ

記事を読む

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

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

記事を読む

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

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

記事を読む

NVIDIA DIGITSをSupervisorを使って自動起動する

はじめに 先日Ubuntu14.04にDIGITS 5をGPUなしP

【2017年度】GeForce 1080 Ti搭載BTOパソコン比較

はじめに 最近ディープラーニング用にGPUのないPCにDIGITSを

Windows用のシンプルなストップウォッチソフト紹介

Windows(10)でも使える使いやすいKAZAMITimerという

MNISTをDIGITS 5のCPUのみで試す(GPUなし)

はじめに DIGITSを使えばGUI操作で簡単にディープラーニングが

Windowsユーザが初めてMacBookを購入したときの注意点や感想

最近12インチのMacBookを購入しました。今までWindowsしか

Redmine3.2をUbuntu14.04にインストールして躓いた所についてメモ

はじめに Ubuntu14.04 ServerにRedmine3.2

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

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

→もっと見る

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