停止滚动功能触发多次？

Question

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

问题：

当用户到达最底端时，该脚本应该只返回一个帖子，而是发出多个请求，从而导致从数据库中快速拉出所有帖子，从而又以错误的方式返回它们订购。

我的问题是，是否有人知道如何阻止垃圾邮件散播并防止垃圾邮件？

注意：

我不想在完成一个AJAX请求后就完全切断它，因为此脚本是一个“无限滚动”，当用户到达底部时会从数据库中一一拉出文章。

在此先感谢，Rich。

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

Answer 1

希望这可以帮助

$(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调用之前检查是否循环）。 如果未定义变量，则必须调用服务器。 因此，这仅导致对服务器的一次调用。

Answer 2

尝试将处理程序定义为命名函数，使用.off()在$.ajax()调用之前分离scroll事件，在$.ajax()完成后重新附加scroll事件

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);