通过“无限”滚动显示不正确的AJAX数据加载

我目前正在使用一个脚本，该脚本会在您触发内容（单击链接）或滚动到页面底部时加载内容。我这样做很有趣，但是它逐渐变成了噩梦...触发的部分正常工作，而“滚动到底部”部分有时有效，有时却不起作用。它有时会加载两次帖子，有时会重复发布帖子集（我一次加载5个帖子），而不会显示下一组帖子，我猜是因为它加载内容的速度如此之快，以至于：

1. 查询混在一起（AJAX调用/ mysql查询/响应...？）或...
2. DOM存在某种问题（我想这是调用此方法的正确方法...）或...
3. 由于我的基本知识，这是我目前无法想到的另一个故障的原因...

当您向下滚动滚动条时会出现问题，因此它会非常快速地加载内容，对于Firefox来说尤其如此，因为如果您已经在页面底部并刷新页面，它将无限期加载，直到没有更多内容为止帖子，再一次，它确实非常快。

我整天都尝试了不同的方法……但找不到解决方案。首先，我尝试设置一个标志，以便在每个AJAX调用完成时，它会按加载的帖子数增加某个变量，并且仅在数量增加后才会再次执行该调用，并且必须有序地执行（在我的脑海中表示成功进行了AJAX调用）。这没用。

然后，我尝试为AJAX调用设置超时，然后为包含该调用的函数设置超时，然后为首先执行该函数的功能（滚动到底部）设置这种超时，但是缺点是在该超时时间内不执行任何操作（因此，甚至不显示“正在加载” html），并且情况发生的次数更少，但仍然发生。我还尝试在$ .ajax（）函数中设置超时，我认为这是另一种超时，因为它没有达到我的期望...

最后，我尝试将async设置为false，这是一件坏事，因为它会将页面挂起，直到完成为止，并且还弃用了它；不用说，它也不起作用（我没有注意到任何明显的行为变化）。

我在这里真的迷路了；我什至不知道为什么会发生这种“小故障” ...

这是我的代码...

    $.ajax({    //Removed some code in order to make it brief                             
  url: 'load.php',        
  type: 'post',     
  dataType: 'json',       
  data: {offset: countContent, limit: displayNumber},
  success: function(data)         
  {
           if(data)
           {
            for(var i=0;i<display_n;i++)
                     {
            var title = data[i][1];
            var author = data[i][2];
            var img = data[i][3];
            var date = data[i][4];
            var htmlStr = 
            '<div class="post" id="'+i+'"></div>';
           $(element).append(htmlStr);
           $(element).children('#'+i+':last').hide().fadeIn(200+(i*250));
                      }
            }
           else if(data == null){

             //Do something when there are no more posts
          }

  },
  error: function() { 
         // Error     
                     }

});

以及处理ajax调用的php

<?php
$offset = (int) $_POST['offset'];
$limit = (int) $_POST['limit'];
$db = 'mysql:host=localhost;dbname=posts;charset=utf8';
$u = 'username';
$p = 'password';
$con = new PDO($db,$u,$p);
$q = $con->prepare("SELECT id, title, author, img, date FROM articles 
ORDER BY id DESC LIMIT :limit OFFSET :offset");
$q->bindParam(':offset',$offset,PDO::PARAM_INT);
$q->bindParam(':limit',$limit,PDO::PARAM_INT);
$q->execute();
$articles = $q->fetchAll(PDO::FETCH_NUM);
$con = null;
$array_count = count($articles);
if ($articles){
 for ($i=0;$i<$array_count;$i++)
   {
$articles[$i][4] = date("d F Y",strtotime($articles[$i]['4'])); 
  }
   echo json_encode($articles);
  }
 else
 {
  $articles = null; //sends null if the data is empty
 echo json_encode($articles);
 }
?>

有没有办法在另一个执行之前“延迟” ajax调用，以使文章正确加载？还是等到按计划加载了ajax中的所有内容，然后再进行下一个操作？在这种情况下我该怎么办？

抱歉，如果这篇文章很大，我想指出一点，哈。非常感谢您的帮助，谢谢。

编辑：这是我在下面发布的解决方案：

我将全局变量running设置为false，并将整个AJAX调用包装在if ！running条件中，进入循环后立即使该变量为true，然后在$ .ajax的“ complete： ”参数上再次使其为false。函数或通过$ .ajaxComplete（）。我猜一个人也可以使用.on（）和.off（）语句来绑定和取消绑定事件触发器，但是我发现前一种方法非常简单。

这样，AJAX调用就可以在另一个启动之前完成，并且内容可以正确显示。