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()调用之前使用scroll分离$.ajax()事件，在scroll完成后重新挂接$.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);

停止滚动功能多次触发？

2 个答案: