Question

以下是代码:(感谢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>");
                    }
                }
            });
        }
    });

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

我把故障保护放进去告诉它最后的帖子应该是什么（正确的变量），检查实际的最后一个帖子 - $（“。activity：last”）。attr（“id”），并且只如果它匹配，则发布html并将“properlast”变量增加10。

这有帮助，但滚动速度非常快时仍然会重复发帖 - 所以会增加时间延迟修复吗？我觉得这不会那么理想，因为它根本不应该重复结果。

Answer 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;
      }
    });
  }
});

jQuery Facebook / Tumblr风格的无限卷轴

1 个答案: