实现无限滚动而不显示重复数据

时间:2012-05-30 04:08:02

标签: jquery ajax infinite-scroll

我写了一个简单的脚本,我使用ajax $ .get来获取无限滚动的数据。问题是,我可能比加载时滚动更快,导致它加载三次?

function last_msg_funtion() 
{ 
    var ID=$(".feed_container").last().attr("id");
    $.ajax({
        url: "ajax/pagination.php",
        type:"get",
        data: "p="+ID
    }).done(function(data){
    if (data != "") 
        {
            var $boxes = $(data); 
            //$(".feed_container:last").after(data); 
            $("#feed_main").append($boxes).masonry('appended',$boxes);

        }
});

$(window).scroll(function(){
    var mostOfTheWayDown = ($(document).height() - $(window).height())  - 300;
    if ($(window).scrollTop() >= mostOfTheWayDown)
    {
        //alert('test');
        last_msg_funtion();
    }
}

如果我一直向下滚动,则需要一段时间才能加载。我在last_msg_function()返回的数据是AJAX $ .get(),我正在获取图像。但是,它正在加载三倍相同的数据。有什么想法可以防止这种情况吗?

由于

2 个答案:

答案 0 :(得分:1)

您需要设置一个“搜索”变量,该变量在空闲时为false,在搜索时为true,然后使用该变量知道何时开始新搜索。

var searching = false; // new variable

function last_msg_funtion() 
{ 
    if (!searching) { // only initiate a new ajax request if this variable is false
        searching = true; // set variable to true
        var ID=$(".feed_container").last().attr("id");
        $.ajax({
            url: "ajax/pagination.php",
            type:"get",
           data: "p="+ID
       }).done(function(data){
            searching = false; // set variable to false on success
            if (data != "") 
            {
                var $boxes = $(data); 
                //$(".feed_container:last").after(data); 
                $("#feed_main").append($boxes).masonry('appended',$boxes);

            }
       });
    }
}

答案 1 :(得分:0)

当使用G +并滚动到页面底部时,G +在获取消息之前有一点延迟。
使用setInterval()它将解决您的问题。内部区间函数调用last_msg_funtion()