jQuery Facebook / бесконечный скроллер в стиле Tumblr

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

Он тянет десять постов за раз.Прекрасно работает, за исключением проблем с повторением одних и тех же десяти сообщений дважды.

Я вставил отказоустойчивый, чтобы сказать, каким должно быть последнее сообщение (переменная Properlast), сопоставить его с фактическим последним сообщением - $ (". Activity: last"). Attr ("id"), и только если он совпадает, отправьте html и увеличьте переменную "Properlast" на десять.

Это помогло, но повторяющиеся сообщения по-прежнему возникают при очень быстрой прокрутке - так что, добавление задержки может исправить это?Я чувствую, что это было бы не так идеально, потому что это вообще не должно повторять результаты.

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