javascript - "infinite"滚动时 AJAX 数据加载不正确

Question

我目前正在开发一个脚本，当您触发它(通过单击链接)或滚动到页面底部时，该脚本会加载内容。我这样做是为了好玩，但它正在慢慢变成一场噩梦......触发的部分工作正常，而“滚动到底部”部分有时工作，有时不工作。它有时会加载一个帖子两次，有时会重复多组帖子(我一次加载 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 调用，以便正确加载文章吗？或者等到 ajax 中的所有内容都按计划加载后再进行下一个？这种情况我能做什么？

如果这篇文章有点大，我很抱歉，我想我想表达一个观点，哈哈。非常感谢您的帮助，谢谢。

编辑:这是我在下面发布的内容以及解决方案:

I set a global variable running to false, and wrapped the whole AJAX call inside an if !running condition, immediatly making the variable true after entering the loop, and making it false again on either the "complete: " parameter of the $.ajax function or via $.ajaxComplete(). I'm guessing one can also use .on() and .off() statements to bind and unbind the event trigger, but I found the previous method so much more simple.

这允许 AJAX 调用在另一个调用开始之前完成，并且内容可以正确显示。

Answer 1

我建议您在触发事件触发器后立即将其关闭，并在填充 DOM 后将其重新打开。