Javascript 我的AJAX调用只返回我数据库的一部分，并赢得'；不要在卷轴上加载更多

我已经制作了一个AJAX脚本，可以在scroll上从数据库加载数据。我的数据库中有24条记录，但当我向下滚动时，它似乎只加载了其中的20条，并停止在那里，而不是加载其余的4条记录

我已经试着在加载记录时设置了偏移量和限制，但我似乎无法正确处理。当我调整浏览器的大小时，它似乎加载了所有奇怪的东西

我的HTML只是两个基本的div

<div class="articles">

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

    </div>

---

我认为问题可能出在scrollTop调用上，但我还没有找到任何其他方法来实现“懒散加载程序”效果。我想自己编程，这就是为什么我没有使用插件。希望这不是新手犯的小错误，因为我已经花了太多时间在这个小东西上了

滚动

事件在一个小轮子动作中发射了大约10-15次

因此，它触发的频率太高，以至于在每个事件之间都有一个异步Ajax请求

结果是，

increaseArticles

通过并发请求增加到fast

因此，尝试使用“标志”来限制这些请求

请参阅代码中的注释

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

---

尝试将cache设置为false这会优化代码，但是，我只在10之前获取记录的问题仍然存在。它仍然没有加载我的数据库中剩余的4条记录。请尝试在

滚动

处理程序的开头加载

console.log（increaseArticles）

。。。至少看看这是否是问题所在。如果这个值没有问题，我将检查PHP side.console.log（increaseArticles）在控制台中不返回任何内容，不在滚动处理程序的开头，也不在结尾。这就是问题吗？奇怪。。。你有到这个页面的实时链接吗？我的网站是有响应的，在我的决议中只有20条记录。但是，如果我调整浏览器的大小并向下滚动，则会显示更多内容，并且效果良好。在更高的分辨率上你不能滚动，所以脚本是绝对的，我想我需要在屏幕大小上修正记录的数量

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