在使用innerHTML插入Ajax响应之前，浏览器未更新文本

Question

我正在使用具有树状页面结构的CMS，因此我试图模拟Windows Explorer（例如，用于浏览其C驱动器）的软件。 因此，最初，我在根级别列出页面，并使用onClick事件和AJAX，单击根页面将在该页面上显示下面的页面，这些页面是我为此创建/分配的。

一切正常，当xmlhttp.send运行时，我在另一个DIV中显示了一个动画加载的gif， if (xmlhttp.readyState==4 && xmlhttp.status==200)为true， if (xmlhttp.readyState==4 && xmlhttp.status==200)其关闭。

问题是，当有大量子页面document.getElementById(DivId).innerHTML = xmlhttp.responseText; 1,000个子页面，是的，客户端创建了子页面）时，AJAX完成并且到达了document.getElementById(DivId).innerHTML = xmlhttp.responseText; 这会导致gif停止旋转。 因此，我已经在Google上进行了搜索，这似乎是浏览器问题。

所以我想，我将在AJAX调用期间使用gif并在浏览器呈现新的innerHTML时显示等待文本。 但是，尽管花费了几秒钟，但该文本从未显示过，我只看到冻结的gif，然后在渲染后显示“完成”文本。

如果我注释掉“完成”行，则等待文本的确会显示出来。

代码如下：

function getPages(page_id, DivId)
{
    var loadingicon_div = "page_" + page_id + "_loadingicon";
    var loading_icon = 'image here, not allowed to post images..'; 

    document.getElementById(loadingicon_div).innerHTML = loading_icon;

    xmlhttp = new GetXmlHttpObject();
    xmlhttp.onreadystatechange = function() 
                    { 
                        if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
                        {
                            document.getElementById(loadingicon_div).innerHTML = "Retrieved pages from the server, please wait while your browser displays them ...";
                            document.getElementById(DivId).innerHTML = xmlhttp.responseText;
                            document.getElementById(DivId).style.padding="5px";
                            document.getElementById(loadingicon_div).innerHTML = "done";
                        }
                    }

    var url="tree_ajax.php";

    xmlhttp.open("GET",url,true);
    xmlhttp.send(null);
}

Answer 1

您确实应该使用框架。 最近，我使用extjs中内置的ajax treeview进行了几乎相同的操作。 相信我，这将为您省去很多麻烦。 跨浏览器dom是PITA。

我知道这不能回答您的特定问题，但请注意我的建议！

http://dev.sencha.com/deploy/dev/examples/tree/reorder.html

Answer 2

唯一的解决方案是重新设计。 -不，不是，但您确实应该-继续阅读；）

动画gif停止动画的原因是因为浏览器正在使用它的全部功能将新元素添加到DOM并在完成后重新渲染/重新绘制页面。 根本没有cputime可以给gif动画。

计算机/浏览器越慢，您看到的问题就越多，但是如果您构建的页面包含足够的元素，则可以在4ghz的计算机上的Google chrome中实现此目的。

当涉及到javascript / DOM操作/渲染/绘画时，浏览器本质上是单线程的野兽，因此它一次只能真正做一件事。

它试图通过将复杂的操作分解为片来弥补这一点，然后以使其看起来可以一次完成多项操作的方式运行这些片（这与操作系统在单核计算机上所做的很相似，尽管要简单得多）

但是，一旦获得足够复杂的dom结构，重新渲染/重新绘制切片就会变得很大，以至于浏览器在发生这种情况时似乎会冻结。

至于文字没有出现：

如果您希望在进行大型DOM操作之前先使较小的DOM操作生效（例如插入文本），则需要使浏览器将其视为两个单独的切片（它不希望这样做，因为DOM操作以及随后的重新渲染/重新绘制非常耗费CPU资源）

为此，请使用setTimeout中断javascript中的调用堆栈。

这将允许浏览器在下一次DOM操作和随后的重新渲染/重新绘制之前进行重新渲染/重新绘制。

通常，使用setTimeout以零为基础的延迟就足够了，因为setTimeout本身会中断调用栈，但是在某些情况下，您将需要一个小的延迟-随便找点时间找到甜蜜点:)

例：

//do small DOM manipulation here
setTimeout(function(){
  //do major DOM manuipulation here
},0);