0

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

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

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

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

// 処理中メッセージを表示
const progress = document.querySelector('#progress');
progress.style.display = 'block'; // display: none -> block

setTimeout(() => {

  // 時間のかかる処理
  const excel = new ActiveXObject('Excel.Application');
  // 印刷処理...等

  // 処理中メッセージを非表示に
  progress.style.display = 'none';

},0);

1 件の回答 1

0

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

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

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

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

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

progress.style.display = 'block';
progress.offsetWidth;  // 読むだけで使わない
// 時間のかかる処理
...
1
  • requestAnimationFrameを試してみましたが2重ではなく1回だけ呼んでもスタイルは更新されました。 requestAnimationFrameをMDNのページで見ると"指定した関数を呼び出して次の再描画の前にアニメーションを更新することを要求します。"とありますが、重い処理の前にアニメーションの更新があるとは限らないということでしょうか。 また、"Edge のバージョン17以前と Internet Explorer は、描画サイクルの前に requestAnimationFrame を確実に発行するとは限りません。"とあるのでIEでは安定しないのでしょうか…。 offsetWidthは試してみましたが効きませんでした。
    – sia
    Commented 2020年9月28日 7:18

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。