質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

3回答

1776閲覧

javascript 進捗表示について

sia

総合スコア8

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

1グッド

1クリップ

投稿2018/08/23 01:43

javascriptで重い処理を実行している間に、ユーザに進捗状況を表示したいと考えています。

処理毎にプログレスバーのゲージを(10,20, ...100)と増やそうと思ったのですが、処理が最後まで
終わった段階で一気にゲージが100になってしまいます。

処理毎にゲージを更新するためには、どのような記述の仕方をすれば良いでしょうか。
ご教授お願いします。。

ブラウザ:IE10~11想定
javascriptの「何かの処理」では実際はActiveXObjectのExcel.Applicationを利用した
処理を行っています。

html

1<!DOCTYPE html> 2<html> 3 <head> 4 #frame { width:100px; height: 20px; background-color: white; } 5 #gauge { width:0px; height: 20px; background-color: green; } 6 </head> 7 <body onload="fn();"> 8     <!-- プログレスバー --> 9 <div id="frame"> 10 <div id="gauge"></div> 11 </div> 12 </body> 13</html>

javascript

1function fn() { 2 3 /* 4 何かの処理 5 */ 6 updateGauge(10); //ゲージ更新 7 8 /* 9 何かの処理 10 */ 11 updateGauge(20); 12 13 // ・・・ 14 15 updateGauge(100); 16} 17function updateGauge(gaugeLength) { 18 document.getElementById("gauge").css('width',gaugeLength + 'px'); 19}
tamahimesama_xz👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

非同期な処理が走っているのかもしれません
promiseで処理を検討ください

投稿2018/08/23 02:34

yambejp

総合スコア114572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

sia

2018/08/23 04:52

ご回答ありがとうございます。 調べてみたのですが、IE10~11ではPromiseが使えないようで... 申し訳ありません。。
yambejp

2018/08/23 05:30

IEを主眼にするならjQueryの$.Deferredでよいかも
sia

2018/08/23 07:22

promiseの実装について調べていた時にpolyfillについてちらほら見かけましたので、いただいたリンクから読み込むようにしてpromiseが使えるようになりました。 ありがとうございます!
guest

0

ベストアンサー

async/awaitが使えないということだったので改良版(仮)です。

html

1<!DOCTYPE html> 2<html> 3 <head> 4 <title>title</title> 5 </head> 6 <style> 7 #frame { width:100px; height: 20px; background-color: white; } 8 #gauge { width:0px; height: 20px; background-color: green; } 9 </style> 10 11 <body onload="fn();"> 12   <!-- プログレスバー --> 13 <div id="frame"> 14 <div id="gauge"></div> 15 </div> 16 17 18 <script> 19 function async_process(percentage){ 20 return new Promise(function(resolve, reject){ 21 setTimeout(function(){ 22 console.log("ok " + percentage + "%"); 23 resolve(); 24 }, 500); 25 26 }) 27 } 28 29 function fn() { 30 31 Promise.resolve().then(function(){ 32 return async_process(10); 33 }).then(function(){ 34 updateGauge(10); 35 }).then(function(){ 36 return async_process(20); 37 }).then(function(){ 38 updateGauge(20); 39 }).then(function(){ 40 return async_process(100); 41 }).then(function(){ 42 updateGauge(100); 43 }); 44 } 45 46 function updateGauge(gaugeLength) { 47 document.getElementById("gauge").style.width = gaugeLength + 'px'; 48 } 49 50 </script> 51 </body> 52</html> 53

投稿2018/08/23 05:25

編集2018/08/23 06:24
_lemon2003_

総合スコア274

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

x_x

2018/08/23 06:19

IE想定なのでアロー関数を使うべきではないでしょう
x_x

2018/08/23 06:23

まだ残っているようです
_lemon2003_

2018/08/23 06:25

クリップボードがバグってましたね、 コピペミスでした。修正しました。
sia

2018/08/23 07:20

ご回答、コメントありがとうございます。 こちらの回答を参考にPromiseを使って思い通りの処理が実装できました! ありがとうございます。 アニメーションも入れてみます^^
guest

0

一瞬の処理だと、domの変更がすぐに反映されません。

次のコードをそれぞれ走らせてみてください。

一瞬になってしまう:

html

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6</head> 7<body> 8 <progress id="progress" value="0" max="100"></progress> 9 10 <script> 11 (function(){ 12 let progress = document.getElementById("progress"); 13 14 for(let i = 1, sum = 0; i <= 1000000; i++){ 15 sum += i; 16 if(i % 1000 === 0){ 17 progress.value = i / 10000; 18 console.log(i / 10000); 19 console.log(i); 20 } 21 } 22 })(); 23 </script> 24</body> 25</html>

ちゃんと表示される:

html

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6</head> 7<body> 8 <progress id="progress" value="0" max="100"></progress> 9 10 <script> 11 (async function(){ 12 let progress = document.getElementById("progress"); 13 14 for(let i = 1, sum = 0; i <= 1000000; i++){ 15 sum += i; 16 if(i % 1000 === 0){ 17 progress.value = await (function(){ 18 return new Promise(resolve=>{ 19 setTimeout(()=>resolve(i / 10000), 50) 20 }) 21 })(); 22 console.log(i / 10000); 23 } 24 } 25 })(); 26 </script> 27</body> 28</html>

javascript で命令(domの変更など) をすると、
その場で実際に処理が行われるわけではなく、いったんキューに追加されます。

siaさんの書かれたコードでは、domの変更は後回しになってしまっていますので、
一気に変化したようになります。

余談ですが、html5にはprogressバーがありますので、ブラウザのバージョンが問題無ければ、そっちを使ってみてもいいかもしれません。(styleをバリバリ書かなければ。)

投稿2018/08/23 03:15

_lemon2003_

総合スコア274

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2018/08/23 03:59

IE10が想定に入っているので微妙なところもあるかもしれませんね。
sia

2018/08/23 04:49

ご回答、コメントありがとうございます。 IE11で試しましたが、asyncの部分が使うことができないようです。 FireFox等では確認できました。まさにこんなことがやりたいのですが... キューについて調べてみたのですが、DOMの変更はキューに入ってしまうのですね。 キューに入れずに変更を行う方法でもあればいいのですが。。もう少し調べてみます。
_lemon2003_

2018/08/23 04:58

async/await は promise を使いやすくしたものともいえるので、 言い換えると、promise を使ってもできるということです。
_lemon2003_
_lemon2003_

2018/08/23 05:27

別の回答にコーディングしました。 ご覧ください。
_lemon2003_

2018/08/23 05:32

余談ですが、プログレスバーにアニメーションを付けるのもいいかもしれませんw
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問