从大型 JSON 创建页面内容

Question

我有一个非常大的 JSON 对象，用作创建我的页面的数据源。目前我能够加载整个对象，从中创建 DIV 并显示它。但是，当 JSON 很大时，它会花费很多时间，然后突然显示整个内容。我想分别加载每个子节点，或者在每个节点之后显示加载的内容（追加）。

JSON 具有以下结构：

{
    id:"0",
    text:"",
    children:[{
        id:"0-0",
        text:"",
        children:[...]
    },
    {
        id:"",
        text:"0-1",
        children:[...]
    }]
}

当我加载这个对象时，我会调用一个函数来创建基于根节点的容器，然后是一个递归函数，它会为每个子节点执行。

function loadRoot(wholeJson){
    var rootDiv = '<div id="frag-' + wholeJson.id + '"></div>';
    return rootDiv;
}

function loadChildren(wholeJson){
    rootDiv = $('#frag-' + wholeJson.id);
    wholeJson.children.forEach(function(child){
        loadChild(child);
    });
}

function loadChild(node){
    var newDiv = // create the div here..
    node.children.forEach(function(child){
        loadChild(child);
    });
    newDiv += "</div>" //close it        
    return newDiv;
}

这可行，但正如我所提到的，它会立即加载整个内容。请问如何实现在创建后显示每个子项，而不仅仅是在脚本执行结束时显示？

Answer 1

我遇到了类似的问题。发生这种情况的原因是 javascript 首先在后台处理您的函数，当所有这些都完成后，就会对其进行更改。我不知道这是否是最好的方法。但是带有匿名函数的setTimeout 对我有用。只需将等待时间设置得很短。