38838


Javascript で div エレメントを手前に表示して操作を受付なくした後に、処理をするプログラムを作りたいと考えています。

しかしながら、作っていくと、処理の方が早く実行され、処理中にエレメントが現れるものになってしまいました。

setTimeout による実装も考えたのですが、あまり不格好なので、質問させてください。  
画面への処理後に、処理をするにはどのようにすればいいのでしょうか？

下に for を処理とした例を示します。

ご教授、よろしくお願いいたします。

[code]

    "use strict"
    
    document.addEventListener("DOMContentLoaded", () => {
     const elem = document.getElementById("elem")
     const hide_button = document.getElementById("hide_button")
    
     hide_button.addEventListener("click", () => {
      elem.classList.add("hide")
      for(let i = 0; i < 500; i ++){
       console.log(i)
      }
     })
    })
[/code]

[code]

    .hide {
      display: none;
    }
[/code]

[code]

    <html>
    <body>
     <div id="elem">
      テスト
     </div>
     <input type="button" id="hide_button" value="hide">
    </body>
    </html>
[/code]


CC BY-SA 3.0
2017-10-11T08:46:16.270
38597
2017-10-18T10:45:31.450
25715
question
javascript
クラスの追加反映後に実行したい


観測されているとおり、要素のclassを変更しても、ブラウザは即座に描画するわけではありません。イベントループに入った後か、必要なときに描画まで行われます。

もし、示されているコードの`for`ループで重い処理をしたいのなら、そもそもメインスレッドで重い処理をすべきではありません。Workerで処理すべきです。

アニメーション処理をしたい場合は、`requestAnimationFrame()` を用います。

どうしても同期的に描画をさせたいなら、レイアウト結果が必要となるようなAPIを呼んで強制描画させることができます。たとえば
`elem.offsetWidth` を呼ぶと描画されることが期待できます。ただし、これをやると実行中の CSS アニメーションがおかしくなります。


CC BY-SA 3.0
2017-10-18T10:45:31.450
38838
2017-10-18T10:45:31.450
3475
38597
answer