jQuery在底部滚动位置时加载更多数据

Question

我有 jQuery 滚动自动加载更多。功能是使用PHP从数据库中加载更多数据。

该功能运行正常，当我尝试滚动时，将加载下一个数据。直到我遇到问题，当我将滚动条放到底部然后我刷新页面时，该功能已加载但它总是显示双数据。

到目前为止，这是我的 JS 函数：

$(document).ready(function()
{
     $('#content').scrollPagination(
     {
         nop : 10,
         id : 10,
         offset : 0,
         error : 'You have reached the end of the post.',   
         delay : 500,
         scroll : true
     });
});

(function($)
{
     $.fn.scrollPagination = function(options)
     {
          var settings =
          {
               nop     : 10, // The number of posts per scroll to be loaded
               offset  : 0, // Initial offset, begins at 0 in this case
               error   : 'No More Posts!',
               delay   : 500,
               scroll  : true
          }

          if(options)
          {
               $.extend(settings, options);
          }

          return this.each(function()
          {
               $this = $(this);
               $settings = settings;
               var offset = $settings.offset;
               var busy = false;
               if($settings.scroll == true) $initmessage = '';
               else $initmessage = 'Click for more';
               $this.append('<div class="content"></div><div class="loading-bar">'+$initmessage+'</div>');

               $('.animation_images').show();

               function getData()
               {
                    $.post('load_post_user.php', {
                    action        : 'scrollpagination',
                    number        : $settings.nop,
                    offset        : offset,
                    uid           : '<?php echo $q_uid; ?>',
                    }, function(data) {
                    $this.find('.loading-bar').html($initmessage);
                    $('.animation_images').hide();

                    if(data == "") {
                    $this.find('.loading-bar').html($settings.error);
                    }
                    else {
                    offset = offset+$settings.nop;
                    $this.find('.content').append(data);
                    busy = false;
                    }
                 });
                }

                getData();

                if($settings.scroll == true) {
                     $(window).scroll(function() {
                     if($(window).scrollTop() + $(window).height() > $this.height() && !busy) {
                         busy = true;
                         $('.animation_images').hide();
                         $this.find('.loading-bar').html('<img src="../assets/img/processing.gif"/>');

                         setTimeout(function() {
                             getData();
                         }, $settings.delay);
                        }
                       });
                      }

                 $this.find('.loading-bar').click(function() {
                      if(busy == false) {
                          busy = true;
                          getData();
                      }
                 });
               });
              }
             })(jQuery);

Answer 1

正如chat 中所讨论的，这是异步调用的问题，为了完整起见，我在这里回答。

脚本包含一个初始的 getData() - 调用，该调用最初为加载脚本时调用 scrollPagination 的每个元素触发。

getData 触发异步“AJAX” - 使用给定参数调用后端，最初设置为 nop = 10 和 offset = 0。

在这个调用之后，窗口的滚动处理程序被绑定。它可能因浏览器而异，但通常在页面完全加载时也会触发。

如果滚动位置设置为页面底部，则此处理程序中的 if 子句为 true，而初始 AJAX 请求仍在处理中，这就是问题所在。

偏移量被设置为新的正确值之后此请求成功返回。由于请求在第一次触发滚动处理程序时没有返回任何内容，因此它仍设置为 0，从而导致与发送的参数完全相同的请求 &offset=0 当然，返回相同的结果作为第一个请求。

发生这种情况是因为没有为第一次调用设置busy bool，所以我推荐的方法是在调用getData() 之前设置busy=true;，而是在此函数的开头设置。

function getData()
{
    busy = true;
    $.post('load_post_user.php', {
        ....
    }
}

如果另一个请求已经在执行，这通常会阻止在滚动时发送第二个请求。

如果您仍然希望在页面底部最初具有滚动位置时加载内容的第二部分，则需要引入类似initial - 标志的内容；

在初始化开始时：

return this.each(function()
{
    $this = $(this);
    $settings = settings;
    var offset = $settings.offset;
    var busy = false;
    var initial = true;    //set to true only this one time when initialising
    ....

并在您的滚动处理程序中编辑检查：

if($settings.scroll == true) {
    $(window).scroll(function() {

    //only execute if either busy is false or initial is true
    if($(window).scrollTop() + $(window).height() > $this.height() && (!busy || initial) {

        if(initial && offset === 0){
            // set correct offset for the second call
            offset += $settings.nop;
        }
        initial = false; //set initial to false and not set it back to true anywhere else
    ....

这样，第二个滚动调用仍将执行，但偏移量正确。