javascriptによるプログレスバーの表示制御

質問

javascriptで任意の処理を実行中に、HTMLのプログレスバーの表示を制御する方法をご教示ください。
ただし、JQueryなどのライブラリは使わないものとします。

実現したい処理は以下です。
(1)：処理開始時にプログレスバーを表示
　（HTMLに定義されている<progress>を表示）
(2)：処理A実行
(3)：プログレスバーの進捗を50%に更新
(4)：処理B実行
(5)：プログレスバーの進捗を100%に更新
(6)：処理終了時にプログレスバーを非表示

上記を実現するために、例えば以下のようなコードを書いても、(1)～(6)の全処理が終わった結果が画面に反映されるため、画面上はプログレスバーは表示されません。

<progress id="prog" max="100" value="0" style="display:none">Loading...</progress>
<script>
//(1)：処理開始時にプログレスバーを表示
document.getElementById("prog").style.display = 'block';
//(2)：処理A実行（仮の処理としてsleep）
Sleep(3);
//(3)：プログレスバーの進捗を50%に更新
document.getElementById("prog").value = '50';
//(4)：処理B実行（仮の処理としてsleep）
Sleep(3);
//(5)：プログレスバーの進捗を100%に更新
document.getElementById("prog").value = '100';
//(6)：処理終了時にプログレスバーを非表示
document.getElementById("prog").style.display = 'none';

//Sleepメソッド（テスト用）
function Sleep(T){
var d1 = new Date().getTime();
var d2 = new Date().getTime();
while( d2 < d1+1000*T ){
d2=new Date().getTime();
}
return;
};
</script>

プログレスバーの進捗を更新する度に、画面にその内容を反映するにはどのようにしたらよいのでしょうか。

回答No.2

t_ohta

while でループを回している間ブラウザは待っているだけで描画処理をしませんので、非同期処理にしてブラウザに一旦制御を返してあげないと描画されません。

-----
document.getElementById("prog").style.display = 'block';
setTimeout(function(){
document.getElementById("prog").value = '50';
setTimeout(function(){
document.getElementById("prog").value = '100';
setTimeout(function(){
document.getElementById("prog").style.display = 'none';
},1000)
},3000)
},3000)

回答No.1

askaaska

確認する環境がないので提案だけ

setTimeoutで呼び出すとかどお？
setTimeoutで呼び出した関数は別スレッドで動くから
やりたい結果になるんじゃないかなーと推測するわ

調整は難しそうだけど