Javascript jquery使用getJSON延迟加载

我正在开发我的第一个jquery移动应用程序。我有一个索引页面，其中包括三个数据角色页面（获取类别、获取帖子、获取帖子内容）。并使用getJSON（）从我的wordpress网站获取数据。 我的问题是listview的延迟。页面显示为空约5秒钟，然后列表一次性显示。 我希望列表一个接一个出现。不等待全部列表完成。我还想知道如何对页面进行延迟加载。 如果你有其他解决我问题的办法。我将不胜感激。 希望有人能在这方面帮助我。 谢谢

这是我的索引文件

触控营销与广告
标题

2014年-触控营销与广告
职位列表

2014年-触控营销与广告
职称
2014年-触控营销与广告

这是我的剧本

    /*----------------- This FUNCTION TO GET ALL CATEGORIES---------------------------------*/



    function ShowCategory(data){



                    var output = '';
                    $.each(data['categories'], function(k, val){

                    output += '<li><a href="#SecondPage" onclick="ShowPosts('+val['id']+')"> \
    '+val['title']+' <span class="ui-li-count">'+val['post_count']+'</span></a></li>';
                        });


                    $('#category_list').append(output);             
                }
    /*---------------------------------THIS FUNCTION TO GET CATEGORY POSTS-------------------*/

    function ShowPosts(id){

        var postslist = '';
        $.getJSON('http://touch.ly/?json=get_category_posts&id=' + id + '&callback=?',

        function(data){

            $.each(data['posts'], function(k, val){

                $('#posts').empty();

                var input = val['date'];
                input = input.split("T")[0]; 
                var date = $.datepicker.parseDate("yy-mm-dd", input); 
                var newDateString = $.datepicker.formatDate("dd-mm-yy", date);


                var Post_title = val['title'];

            postslist +=  '<li><a href="#thirdPage" onclick="CatPostContent('+val['id']+')"> \
                              '+val['title']+' <br />\
                              <p class="ui-li-aside">'+newDateString+'</p></a></li>';


                $('#posts').append(postslist);
                $('#posts').listview('refresh');
            }); 
        });         
    }


    /*-------------------------------------GET POSTS CONTENT---------------*/
    function CatPostContent(id){

        $.getJSON('http://touch.ly/?json=get_post&id=' + id + '&callback=?', function(data){



            var title= '<h2> '+ data.post.title+' </h2>';
            var content = '<p> '+ data.post.content +' </p>'

            $('#PostTitle').html(title);
            $('#PostContnet').html(content);
                console.log(title);

        });
    }

/*--------------此函数用于获取所有类别---------------------------------*/
功能显示类别（数据）{
var输出=“”；
$.each（数据['categories]，函数（k，val）{
输出+='
'；
});
$（“#类别列表”）。追加（输出）；
}
/*---------------------------------此函数用于获取类别帖子-------------------*/
功能显示柱（id）{
var postslist=''；
$.getJSON（'http://touch.ly/?json=get_category_posts&id=“+id+”&回调=？”，
功能（数据）{
$.each（数据['posts']，函数（k，val）{
$（'#posts'）.empty（）；
var输入=val['date']；
输入=输入。拆分（“T”）[0]；
变量日期=$.datepicker.parseDate（“yy-mm-dd”，输入）；
var newDateString=$.datepicker.formatDate（“dd-mm-yy”，日期）；
var Post_title=val['title']；
postslist+='
'；
$（'#posts'）。追加（postslist）；
$（'#posts'）。列表视图（'refresh'）；
}); 
});         
}
/*-------------------------------------获取帖子内容---------------*/
功能CatPostContent（id）{
$.getJSON（'http://touch.ly/?json=get_post&id=“+id+”&回调=？”，函数（数据）{
var title=''+数据.post.title+''；
var content=''+data.post.content+'
'
$（'#PostTitle'）.html（title）；
$（'#PostContnet'）.html（内容）；
控制台日志（标题）；
});
}

尝试一下如何以及何时调用这些函数？为什么在每个函数中都有（$（'#posts'）.empty（）；）。在此之前，您应该清空posts listview。看起来每次listview循环以附加postslist时，您都在清空它。把它放在上面（var postslist=''；）。此外，您不会看到列表项逐个放入，因为每个循环都非常快。如果你想达到这个目的，你需要在每个函数中加入一个延迟/超时函数。谢谢你的回复！我试着把空盒子放好；上面的循环，但现在张贴在列表项目重复！就像一篇文章在列表中重复了三次一样！我怎么能修好它！您还可以用代码示例解释延迟/超时功能吗。

    /*----------------- This FUNCTION TO GET ALL CATEGORIES---------------------------------*/



    function ShowCategory(data){



                    var output = '';
                    $.each(data['categories'], function(k, val){

                    output += '<li><a href="#SecondPage" onclick="ShowPosts('+val['id']+')"> \
    '+val['title']+' <span class="ui-li-count">'+val['post_count']+'</span></a></li>';
                        });


                    $('#category_list').append(output);             
                }
    /*---------------------------------THIS FUNCTION TO GET CATEGORY POSTS-------------------*/

    function ShowPosts(id){

        var postslist = '';
        $.getJSON('http://touch.ly/?json=get_category_posts&id=' + id + '&callback=?',

        function(data){

            $.each(data['posts'], function(k, val){

                $('#posts').empty();

                var input = val['date'];
                input = input.split("T")[0]; 
                var date = $.datepicker.parseDate("yy-mm-dd", input); 
                var newDateString = $.datepicker.formatDate("dd-mm-yy", date);


                var Post_title = val['title'];

            postslist +=  '<li><a href="#thirdPage" onclick="CatPostContent('+val['id']+')"> \
                              '+val['title']+' <br />\
                              <p class="ui-li-aside">'+newDateString+'</p></a></li>';


                $('#posts').append(postslist);
                $('#posts').listview('refresh');
            }); 
        });         
    }


    /*-------------------------------------GET POSTS CONTENT---------------*/
    function CatPostContent(id){

        $.getJSON('http://touch.ly/?json=get_post&id=' + id + '&callback=?', function(data){



            var title= '<h2> '+ data.post.title+' </h2>';
            var content = '<p> '+ data.post.content +' </p>'

            $('#PostTitle').html(title);
            $('#PostContnet').html(content);
                console.log(title);

        });
    }