我的 AJAX 调用只返回我的数据库的一部分，不会在滚动时加载更多

Question

I've made an AJAX script which loads data from my database on scroll. I have 24 records in my database, but when I scroll down it only seems to load 20 of them and stops there, instead of loading the remainder of the 4 records.

I've tried playing around with the offset and limit I've set on loading the records, but I can't seem to get it right. When I resize my browser, it does seem to load everything which is odd.

My HTML are just 2 basic div's

<div class="articles">

        </div>
    <div class="articlesFade">

    </div>

And my JavaScript is

$(document).ready(function(){
    var increaseArticles = 0;
//get the first 10 articles from the database query in database.php
    $.ajax({
        type: "GET",
        url: "php/database.php",
        data: {
            'offset': 0,
            'limit': 10
        },
        success: function(data){
            $('.articles').append(data);
            increaseArticles += 10;
        }
    });

//scroll down to load the next batch of 10
    $(window).scroll(function(){
        if($(window).scrollTop() >= $(document).height() - $(window).height()){
            $.ajax({
                type: "GET",
                url: "php/database.php",
                data: {
                    'offset': increaseArticles,
                    'limit': 10
                },
                success: function(data){
                    $('.articlesFade').append(data).hide().fadeIn(1000);
                    increaseArticles += 10;
                }
            });
        }
    });
});

I think the problem might the scrollTop call, but I've not found any other way of achieving a "lazyloader" effect. I want to program it myself, that's why I haven't used a plugin. Hopefully it's not some small rookie mistake, because I've spent way too much time on this little thing already

Answer 1

scroll event is firing something like 10-15 times in a single small wheel action.

So it fires just too often to have an async Ajax request in between each of these event.

Result is increaseArticles gets increased to fast by concurring requests.

So try using a "flag" to limit those requests...

See comments in code.

$(document).ready(function(){
  var increaseArticles = 0;
  //get the first 10 articles from the database query in database.php
  $.ajax({
    type: "GET",
    url: "php/database.php",
    data: {
      'offset': 0,
      'limit': 10
    },
    success: function(data){
      $('.articles').append(data);
      increaseArticles += 10;
    }
  });

  // Flag
  var ajaxRunning=false;
  var allResultsReceived=false;
      
  //scroll down to load the next batch of 10
  $(window).scroll(function(){
    if($(window).scrollTop() >= $(document).height() - $(window).height()){
        
      // If there is no Ajax request pending
      if(!ajaxRunning && !allResultsReceived){
        $.ajax({
          type: "GET",
          url: "php/database.php",
          data: {
            'offset': increaseArticles,
            'limit': 10
          },
          success: function(data){
            $('.articlesFade').append(data).hide().fadeIn(1000);
            increaseArticles += 10;
            
            var howManyResult = (data.match(/.column/g) || []).length;
            
            if(howManyResult!=10){
              allResultsReceived=true;    // Disable all future request call.
            }
            
            // Reset flag;
            ajaxRunning=false;
          }
        });
      
        // Set flag to true to prevent concurring ajax resquest.
        ajaxRunning=true;
      }
    }
  });
});