Question

我有以下代码，当用户滚动到页面底部时加载内容。问题是，如果滚动得太快，它会加载内容。我可以通过哪些方式更改代码以防止这种情况发生？

$(window).scroll(function(){
    if($(window).scrollTop() == $(document).height() - $(window).height()){
        $('div#ajaxResults').show();
        $.ajax({
            url: "ajax/home.php?last_id=" + $(".postitem:last").attr("id"),
            success: function(html){
                if(html){
                    $("#messages").append(html);
                    $('#ajaxResults').hide();
                }else{
                    $('#ajaxResults').html('<center>None.</center>');
                }
            }
        });
    }
});

我需要解决方案多次工作。此脚本加载接下来的5条消息，但可能会有数百条消息可以加载。它的工作方式与facebook或twitter加载更新的方式相同。

Answer 1

<强> SOLUTION：

$(window).scroll(function(){
    if($(window).scrollTop() == $(document).height() - $(window).height()){
      var lastid = $(".postitem:last").attr("id");
        $('div#ajaxResults').show();
        $.ajax({
            url: "ajax/home.php?last_id=" + $(".postitem:last").attr("id"),
            success: function(html){
                if(html){
                    if(lastid == $(".postitem:last").attr("id")){
                    $("#messages").append(html);
                    $('#ajaxResults').hide();
                            }
                }else{
                    $('#ajaxResults').html('<center>None.</center>');
                }
            }
        });
    }
});

在加载ajax之前添加一个检查lastid的变量，如果变量==文档的最后一个id，则只附加html。这样，如果ajax已经加载，则两者将不相等，并且不会发布更新。

Answer 2

尝试在if块中添加$(this).unbind('scroll');，假设您不希望ajax请求多次运行。不要把它放在$.ajax success回调中，因为它可能以这种方式触发超过1个ajax请求。

http://api.jquery.com/unbind/

Answer 3

你能设置一个变量来存储它被调用的时间戳吗？如果它在几毫秒之内就不再调用了吗？有点hack-ish但可能会做的伎俩。显然，这并不能解决问题，因为这似乎与滚动事件的触发方式有关。

从双重加载内容中停止.ajax

3 个答案: