Javascript Ajax GET被调用了两次（无休止的滚动）

我有一个由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>

//创建分页页面[]
{！！$box->render（）！！}
//Html

饲料结束。

$（文档）.ready（函数（）{
var=false；
$（窗口）.scroll（函数（）{//监视窗口的滚动
didcoll=true；
});
//设置一个间隔，使window.scroll事件不会持续触发。这会等待用户停止滚动不到一秒钟，然后触发pageCountUpdate函数（然后是getPost函数）
setInterval（函数（）{
如果（滚动）{
didcoll=false；
if（$（document.height（）-$（window.height（））-$（window.scrollTop（）<10）{
pageCountUpdate（）；
}
}
}, 250);  

例如，当我将250更改为5000时，它会给出一个时间间隔，但这不是我想要做的。我只想在到达底部时调用一次，可以使用布尔变量禁用它，然后在加载新元素后重新激活它（在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(){
                ..}    
        });
    }

 } 
});

//继续
函数pageCountUpdate（）{
var page=parseInt（$（'#page'）.val（）；
var max_page=parseInt（$（'max_page'）.val（）；
如果（第页<最大页）{
$（'第页'）.val（第+1页）；
getPosts（）；
$（“#页面的结尾”）.hide（）；
}否则{
$（“#页面的结尾”）.fadeIn（）；
}
}
函数getPosts（）{
var data={“page”：$（'#page'）.val（）}
$.ajax({
类型：“POST”，
//经典ajax调用
beforeSend:function（）{
..}
完成：函数（）{
..}
成功：函数（）{
..}    
});
}
} 
});

更新：关于评论中提到的John Resig示例，我需要使用

var outerPane=$details.find（“.details pane outer”），
didcoll=false。我认为没有这个部分会造成我的问题，但我不知道使用
find（）
方法选择哪里。
除了奇怪的setinterval结构（只需将代码移动到scroll事件中，没有间隔）

在页面底部的最后10个像素内，滚动事件似乎被多次调用。因此，当滚动到底部时，在距离底部9px的位置触发事件，加载更多的帖子。但是，即使在加载新帖子之前，您也会进一步滚动，这会再次触发scroll事件。这会使您的帖子加载两次甚至两次以上

要解决这个问题，您可以添加一个简单的布尔开关，以确保帖子在加载时不会再次加载。比如：

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

使用间歇似乎并不是一个很好的消除事件影响的方法？实现这一点的最佳方法是什么？你建议用什么来代替间隔？虽然我肯定他不是唯一一个提倡这种模式的人，但约翰·雷西格建议使用它来简化通话。我需要在哪里设置outerPane<代码>变量outerPane=$details.find（“.details pane outer”），

。我需要用

$details.find（“.details pane outer”）

选择什么？我尝试了

var outerPane=$（“#content”），

但没有改变anything@Phix-那可能没问题。我以前从来没有见过这样的操作，而且有一个每秒运行4次的函数，总是看起来不是一个好主意。我本来会在事件处理程序中使用超时，但这只是我的问题。谢谢你的回答。您的意思是将setInterval移动到

$（窗口）中。滚动（function（）{

？并且，我是否也应该将

pageCountUpdate（）；

放在

load\u new\u posts（）中

？。我对如何适应自己的代码感到很困惑。很抱歉，我是jquery新手。啊，我以为你理解了你发布的代码。首先，试着理解正在发生的一切，它将帮助你学习javascript。setInterval是一个每X毫秒运行一次代码的函数。因此，你的代码总结如下：每次滚动时，变量didcoll切换为true，在下一个间隔（每250毫秒）检查它在哪里为true，然后检查它是否在页面末尾。此方法效率不高，因为javascript不断评估此间隔函数（我在下一个注释中继续）因此，最好评估scrollposition是否接近scroll事件的底部，而不是在时间间隔内。pagecountupdate的操作由您决定，它与您遇到的问题无关。我猜想它会在某个地方更新计数器？您可能应该在向页面插入新帖子后运行它

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