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

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

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

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

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

"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)
  }
 })
})
.hide {
  display: none;
}
<html>
<body>
 <div id="elem">
  テスト
 </div>
 <input type="button" id="hide_button" value="hide">
</body>
</html>