【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

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

関連記事

WordPressサイトのSSL対応(HTTPS化)手順のまとめ【さくらサーバー】

先週頃にこのサイトをSSL対応しましたのでその流れについてまとめておき

【Google Charts】動的にグラフを更新する方法

はじめに Webサイト上でグラフを描こうと思った場合、いくつかのJa

体重変化量計算シミュレータ【ダイエット/肥満】

ツール本体 入力 カロリー入力 1日の余剰摂取/消費カロリー

おサイフケータイ対応ストレージ32GBのSIMフリースマホまとめ【2017年秋版】

はじめに SIMフリーの格安スマホのおサイフケータイ機能付きのもので

リクルート期間限定ポイントの有効な使い道

はじめに  先日クレジットカードの見直し活動の一環でポイント還元率の

初心者がお金を貯めるための節約・財テク手法まとめ【ポイント還元・投資・税金対策】

はじめに  最近なるべく節約しようと思い、お金周りに関して色々調べて

動画講座を効率的にキャプチャして復習する方法

はじめに  最近、動画媒体の講座などをたまに視聴しています。独学だと

→もっと見る

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