javascript - DOM 更新后跟一个大循环没有及时呈现

Question

我的一个页面有大约 9000 个元素，必须经常重建，这可能需要几秒钟。

因此，我制作了一个覆盖元素的小叠加层小部件，它使用 Loading.. 覆盖元素。信息。在重建元素之前，我调用了 showOverlay()，在循环之后我调用了 hideOverlay()。

但是循环在我的 Loading... 消息显示之前锁定了页面，所以它永远不会出现。

function rebuild() {
  showOverlay();    // The overlay never appears...
  for (var i=0;i<9000;i++) {
    // append element...
  }
  hideOverlay();
}

如何在开始循环之前等待叠加层呈现？

Answer 1

function do_rebuild() {
  for (var i=0;i<9000;i++) {
    // append element...
  }
  hideOverlay();
}


function rebuild() {
  showOverlay();    // The overlay will appear
  window.setTimeout('do_rebuild();',1);
}

这是我所知道的唯一跨浏览器方式。