0

这是代码：（修改版的教程感谢 hycus.com）

<script type="text/javascript">
var properlast=10;
$(window).scroll(function(){
        if($(window).scrollTop() == $(document).height() - $(window).height()){
            $("div#loadmoreajaxloader").show();
            $.ajax({

                url: "pinc-myactivity.php?start=" + properlast,
                success: function(html){

                    if(html && $(".activity:last").attr("id") == properlast){
                        $("div#loadmoreajaxloader").before(html);
                        properlast = properlast+10;
                        $("div#loadmoreajaxloader").hide();
                    }else{

                        $("div#loadmoreajaxloader").html("<center>No more posts to show.</center>");
                    }
                }
            });
        }
    });

它一次拉出十个活动帖子。效果很好，除了重复相同的十个帖子两次的麻烦。

我放了一个故障保险来告诉它最后一个帖子应该是什么（properlast 变量），检查它与实际的最后一个帖子 - $(".activity:last").attr("id") 是否匹配然后发布 html 并将“properlast”变量增加 10。

这有帮助，但是当滚动速度非常快时仍然会出现重复的帖子——那么添加时间延迟会解决它吗？我觉得这不太理想，因为它根本不应该重复结果。

4

1 回答 1

1

避免重复元素的最简单方法是确保一次只有一个 ajax 请求在运行。这最好通过一个简单的布尔开关来完成

$(window).scroll(function(){
  var properlast = 10;
  var loading = false;
  if($(window).scrollTop() == $(document).height() - $(window).height()){
    if (loading) {
      return;
    }

    $("div#loadmoreajaxloader").show();
    $.ajax({

      url: "pinc-myactivity.php?start=" + properlast,
      success: function(html){

        if(html && $(".activity:last").attr("id") == properlast){
          $("div#loadmoreajaxloader").before(html);
          properlast = properlast+10;
          $("div#loadmoreajaxloader").hide();
        }else{

          $("div#loadmoreajaxloader").html("<center>No more posts to show.</center>");
        }

        loading = false;
      }
    });
  }
});
于 2011-10-23T21:21:06.433 回答