停止.ajax重复加载内容

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一样工作，加载更新。

- IIDenverII

---

将要翻译的内容：即将翻倍...滚动事件每秒触发数百次，需要缓存机制。翻译后的文本：即将翻倍...滚动事件每秒触发数百次，需要缓存机制。 - charlietfl

Answer 1

解决方法：

$(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，只有当变量==文档的last id时才附加html。这样，如果ajax已经加载，两者将不相等，更新就不会被发布。

- IIDenverII

---

对我有用，谢谢。很棒能找到你正在寻找的问题。 ;) - tyler

Answer 2

尝试在if块内添加$(this).unbind('scroll');，假设您不希望ajax请求运行超过一次。但不要将其放在$.ajax的success回调中，因为这样可能会触发多个ajax请求。

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

- kendaleiv

Answer 3

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

- Sid