Javascript 窗口滚动条点击底部查询更多数据

我有一个页面检测滚动条-查询数据和附加

我的问题是当我从浏览器中检查“网络”时

每次滚动时，它会发送3到4次查询。（因为鼠标滚轮向下滚动的速度非常快）

---

有什么方法可以解决这个问题，所以我不需要查询不必要的数据

尝试检查是否已经进行了ajax调用（查询），如下所示：

if($(window).scrollTop() + $(window).height() > $(document).height() - 300){
//query data & append
}

//set a variable for apply event

var start=1; // now below event work

if(($(window).scrollTop() + $(window).height() > $(document).height() - 300) && start){
start=0;// now it set 0 it s not work until your work done
//query data & append
start=1 //now your work done and it comes it this action again
}

不要忘记在代码中的某个地方声明

ajaxCall

，这样它就不会在全局范围内结束

它的作用是：

• 初始化变量以检查是否已发出请求
• 如果未发出请求，请将变量设置为

  true

  ，然后发出请求
• 当请求返回时显示

  成功

  ，将其设置为

  错误

---

实现这一点的更智能的方法是检测每个卷轴上的卷轴结束事件，并在其中写入代码：

if($(window).scrollTop() + $(window).height() > $(document).height() - 300){
    if(!ajaxCall)
    {
        ajaxCall = true;
        //query data & append
        if (success)
            ajaxCall = false;
    }
}

---

为什么它更聪明？等待滚动结束会给最终用户留下延迟的印象。@Andrei:这比调用ajax并检查是否已经完成还要快。此外，除非第一个请求完成，否则您的代码将无法用于第二次滚动。对于最终用户来说，它不会更快。这就是OP的漏洞所在，在前一个ajax调用成功之前，不会进行其他ajax调用，因此他不会多次追加相同的内容。此外，如果前一个没有返回，则无需进行其他调用，因为您将从服务器请求相同的

数据页。这是毫无意义的。另外，你的代码多次请求相同的
数据。@Andrei:你怎么能确定它调用了相同的数据。如果是这样的话，OP就不会在每个卷轴上调用它。
var delay = 1000;
var timeout = null;
$(window).bind('scroll',function(){
  clearTimeout(timeout);
  timeout = setTimeout(function(){
     alert('scrolling stopped');
     if($(window).scrollTop() + $(window).height() > $(document).height() - 300){
     //query data & append
 }},delay);
});​​​​​​​​​​