

ブラウザのクライアントスクリプト（javascript）でexcelを読み込んで印刷するスクリプトを書いています。

excelアプリケーションの立ち上がりから印刷の処理まで時間がかかるので処理中...のような表示をポップアップさせておきたいのですが、良い書き方がわかりません。

現状は以下のように書いているのですが、setTimeoutを使うのがしっくりこず…

スタイルを変更した際のレンダリングキューのタスクをjavascript側から  
強制的に実行する方法はないのでしょうか…。

[code]

    // 処理中メッセージを表示
    const progress = document.querySelector('#progress');
    progress.style.display = 'block'; // display: none -> block
    
    setTimeout(() => {
    
      // 時間のかかる処理
      const excel = new ActiveXObject('Excel.Application');
      // 印刷処理...等
    
      // 処理中メッセージを非表示に
      progress.style.display = 'none';
    
    },0);
    
[/code]


CC BY-SA 4.0
2020-09-28T04:44:08.050
70772
2020-10-10T05:39:07.823
2020-09-28T06:38:25.637
3475
42089
question
javascript
スタイル変更が画面に反映されてから処理をしたい


●`setTimeout(..., 0)` で画面に反映される保証はありません。

●規格で`requestAnimationFrame`コールバックの直後にスタイルが画面に反映されることが決まっています。なので、`requestAnimationFrame`を2回行えばOKです。

[code]

    progress.style.display = 'block';
    requestAnimationFrame(function() {
      requestAnimationFrame(function() {
        // 時間のかかる処理
        ...
      });
    });
    
[/code]

ただし、IEが規格にちゃんと準拠しているかどうかは把握していません。

●昔ながらの方法として、画面レイアウトが確定しないと得られない値を読み出す、というのがあります。

[code]

    progress.style.display = 'block';
    progress.offsetWidth;  // 読むだけで使わない
    // 時間のかかる処理
    ...
    
[/code]


CC BY-SA 4.0
2020-09-28T06:56:28.477
70777
2020-09-28T06:56:28.477
3475
70772
answer