javascript - Ajax GET 被调用两次(在无尽滚动中)

Question

我有一个由 ajax 和 jQuery 制作的无休止的滚动。它使用 Controller (Laravel5)中分页的项目，通过ajax获取它。

一切正常，但我有一个问题。当我点击页面底部时，它会进行两次 ajax 调用。我怀疑这是因为 setInterval 因为当我更改时间时，它会影响该部分。

// Creates the pagination pages [<[1]2]3]>]
{!! $boxes->render() !!}

// Html
        <input type="hidden" id="page" value="1" />
        <input type="hidden" id="max_page" value="{{{ $boxes-id }}}" />
        <div id="end_of_page" class="center">
            <hr/>
            <span>End of the feed.</span>

<script>
  $(document).ready(function() {

    var didScroll = false;

       $(window).scroll(function() { //watches scroll of the window
             didScroll = true;
       });


       //Sets an interval so your window.scroll event doesn't fire constantly. This waits for the user to stop scrolling for not even a second and then fires the pageCountUpdate function (and then the getPost function)
    setInterval(function() {
        if (didScroll){
           didScroll = false;
           if(($(document).height()-$(window).height())-$(window).scrollTop() < 10){
                  pageCountUpdate();
            }
        }
    }, 250);  

例如，当我将 250 更改为 5000 时，它会给出中间的时间，但这不是我想要的。我只想在触底后进行一次调用，也许可以使用 bool 变量禁用它，然后在新元素加载后重新激活它(在 ajax 成功状态下)，但我无法弄清楚将阻塞变量。

//Continuing

    function pageCountUpdate(){
          var page = parseInt($('#page').val());
          var max_page = parseInt($('#max_page').val());

          if(page < max_page){
              $('#page').val(page+1);
              getPosts();
              $('#end_of_page').hide();
          } else {
              $('#end_of_page').fadeIn();
          }
      }

    function getPosts(){
        var data = { "page": $('#page').val() }
        $.ajax({
                type: "POST",

                //Classic ajax call

                beforeSend: function(){
                ..}
                complete: function(){
                ..}
                success: function(){
                ..}    
        });
    }

 } 
});

更新:关于评论中提到的John Resig的示例，我需要使用var outerPane = $details.find(".details-pane-outer")，
didScroll = false;。我认为没有这部分会造成我的问题，但我无法弄清楚在哪里选择 find() 方法。

Answer 1

除了奇怪的 setinterval 结构(只需将代码移动到滚动事件中，没有间隔)。

看起来滚动事件在页面底部的最后 10 个像素内被多次调用。因此，当滚动到底部时，距底部 9 像素处，会触发该事件，从而加载更多帖子。但即使在加载新帖子之前，同时您也可以进一步滚动，这会再次触发滚动事件。这会使您的帖子加载两倍甚至更多。

为了解决这个问题，您可以添加一个简单的 bool 开关，以确保帖子在已经加载时不会再次加载。像这样的东西:

var loading=false;
function onReachScrollLimit(){
    if(loading){return;}
    loading=true;
    load_new_posts();
}
function load_new_posts(){
    //insert the posts
    loading=false;
}