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

时间:2014-05-05 11:35:47

标签: javascript jquery

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

我有一个页面检测滚动条 - 查询数据&追加。

我的问题是当我检查网络'来自浏览器

每个滚动发送3或4次查询。(因为鼠标滚轮向下滚动非常快)

有没有办法解决这个问题,所以我不需要查询不必要的数据

3 个答案:

答案 0 :(得分:1)

//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
}

答案 1 :(得分:1)

尝试检查是否已经进行了ajax调用(查询),如下所示:

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

不要忘记在代码中的某个地方声明ajaxCall,这样它就不会在全局范围内结束。

这是做什么的:

  • 初始化变量以检查是否已经提出请求
  • 如果未提出请求,请将变量设置为true并发出请求
  • 当请求以success返回时,请将其设置为false

答案 2 :(得分:1)

更智能的方法是在每个滚动条上检测滚动事件的结束并在其中写入代码:

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