當滾動位置在底部時，jQuery將加載更多數據

Question

我有jQuery Scroll Auto Load More。 該功能是使用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

如聊天中所討論的，這是異步調用的問題，為完整起見，我在這里回答。

腳本包含一個初始的getData() -調用，該調用最初為加載腳本時調用了scrollPagination每個元素觸發。

getData引發一個異步“ AJAX”-使用給定的參數調用后端，該參數最初設置為nop = 10且offset = 0 。

在此調用之后，立即綁定到窗口的滾動處理程序。 每種瀏覽器的瀏覽器可能有所不同，但是通常在頁面完全加載時也會觸發。

如果滾動位置設置為頁面底部，則當仍在處理初始AJAX請求時，此處理程序中的if子句為true，這就是問題所在。

成功返回此請求后，將偏移量設置為新的正確值。 由於請求在第一次觸發滾動處理程序時沒有返回任何內容，因此它仍設置為0，從而導致與它一起發送參數&offset=0的完全相同的請求，當然，也返回相同的請求結果作為第一個請求。

發生這種情況是因為沒有為第一個呼叫設置busy布爾，所以我建議的方法是設置busy=true; 不是在調用getData()之前，而是在此函數開始時。

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

如果已經執行了另一個請求，則這將防止在滾動時一般發送第二個請求。

如果你還想要的內容的第二部分初始具有在頁面底部的scrollPosition當程序被加載，你就需要引入像一個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
    ....

這樣，盡管如此，第二個滾動調用仍將執行，但偏移量正確。