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具有匿名功能对我有用。只是将等待时间设置得很低。

从大型JSON创建页面内容

1 个答案: