DOM更新后跟一个大循环不会及时呈现 [英] DOM update followed by a big loop doesn't render in time

问题描述

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

A piece of my page has ~9000 elements in it and it has to be rebuilt often, which can take a few seconds.

所以，我做了一点使用 Loading .. 覆盖元素的覆盖小部件。信息。在我重建元素之前，我调用 showOverlay（），在循环之后我调用 hideOverlay（）。

So, I made a little overlay widget that covers the element with a Loading... message. Right before I rebuild the element, I call showOverlay(), and after the loop I call hideOverlay().

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

But the loop locks up the page before my Loading... message is displayed, and so it never appears.

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

在开始循环之前，如何等待叠加层渲染？

How can I wait for the overlay to be rendered BEFORE I start the loop?

推荐答案

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);
}

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

Is the only cross-browser way I know of.

这篇关于DOM更新后跟一个大循环不会及时呈现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！