Javascript 是否停止多次触发滚动功能？

因此，我有一个脚本，它从数据库中提取数据，并在用户接近页面底部时显示数据

问题：

当用户到达底部时，脚本应该只返回一个post，但是会发出多个请求，导致所有post都以快速的速度从数据库中提取出来，从而以错误的顺序返回它们

我的问题是，有没有人知道如何阻止它失控，防止垃圾文章

注意：

我不希望在AJAX请求发出后就完全停止，因为这个脚本是一个“无限滚动”，当用户到达底部时，从数据库中一个接一个地提取文章

事先谢谢你，里奇

 $(document).ready(function() {     
      $(window).scroll(function() {
           if($(window).scrollTop() + $(window).height() > $(document).height() - 200) {
                $('div#loadMoreArticles').show( function(){         
                     $.ajax({
                          url: "loadMoreArticles.php?lastArticle="+ $(".postedArticle:last").attr('id') ,
                          success: function(html) {
                               if(html){       
                                    $("#postedArticle").append(html);
                                    $('div#loadMoreArticles').hide();       
                               } else { 
                                    $('div#loadMoreArticles').replaceWith("<p>There are no more articles.</p>");
                               }
                          }
                     });
                });
           }
      });
 });

$（文档）.ready（函数（）{
$（窗口）。滚动（函数（）{
if（$（窗口）.scrollTop（）+$（窗口）.height（）>$（文档）.height（）-200）{
$（'div#loadMoreArticles'）.show（function（）{
$.ajax({
url:“loadMoreArticles.php？lastArticle=“+$（“.postedArticle:last”）.attr（'id'），
成功：函数（html）{
如果（html）{
$（“#postedArticle”）.append（html）；
$（'div#loadMoreArticles'）.hide（）；
}否则{
$（'div#loadMoreArticles'）。替换为（“没有更多的文章。
”；
}
}
});
});
}
});
});

希望这有帮助

$(document).ready(function() {
  var AjaxRequestOn;
  $(window).scroll(function() {
    if ($(window).scrollTop() + $(window).height() > $(document).height() - 200) {
      $('div#loadMoreArticles').show(function() {
        if (!AjaxRequestOn) {
          AjaxRequestOn = $.ajax({
            url: "/",
            success: function(html) {

            }
          });
        }
      });
    }
  });
});

---

只需使用一个变量来设置ajax请求，当设置第一个ajax时，如果用户再次向上滚动并向下滚动，则该变量具有一些值，因此我们不应再次执行调用（在ajax调用之前检查if loop）。如果未定义变量，则必须调用服务器。因此，这只会导致对服务器的一次调用。

尝试将处理程序定义为命名函数，使用

.off（）

在

$之前分离
滚动
事件。ajax（）

调用，在

$之后重新附加
滚动
事件。ajax（）

完成

function scroller() {
       if($(window).scrollTop() + $(window).height() > $(document).height() - 200) {
            $(this).off("scroll.ajax");
            $('div#loadMoreArticles').show( function(){         
                 $.ajax({
                      url: "loadMoreArticles.php?lastArticle="+ $(".postedArticle:last").attr('id') ,
                      success: function(html) {
                           if(html){       
                                $("#postedArticle").append(html);
                                $('div#loadMoreArticles').hide();       
                           } else { 
                                $('div#loadMoreArticles').replaceWith("<p>There are no more articles.</p>");
                           };
                           // setTimeout(function() {
                             $(window).on("scroll.ajax", scroller)
                           // }, 500)
                      }
                 });
            });
       }
  }

$(window).on("scroll.ajax", scroller);

函数滚动条（）{
if（$（窗口）.scrollTop（）+$（窗口）.height（）>$（文档）.height（）-200）{
$（this.off（“scroll.ajax”）；
$（'div#loadMoreArticles'）.show（function（）{
$.ajax({
url:“loadMoreArticles.php？lastArticle=“+$（“.postedArticle:last”）.attr（'id'），
成功：函数（html）{
如果（html）{
$（“#postedArticle”）.append（html）；
$（'div#loadMoreArticles'）.hide（）；
}否则{
$（'div#loadMoreArticles'）。替换为（“没有更多的文章。
”；
};
//setTimeout（函数（）{
$（窗口）.on（“scroll.ajax”，scroller）
// }, 500)
}
});
});
}
}
$（window）.on（“scroll.ajax”，scroller）；

该功能是一个无限滚动条。因此，这只是在您的建议下通过AJAX返回我在PHP查询中的限制+1尽管如此。@Filthy\u Rich在success函数中只设置了AjaxRequestOn=false。