求问 div的滚动条到底部然后停止滚动 等获取完数据后再开启

Question

现在是这么个情况。

我有一个div 可以上下滚动  当滚动到最低端  开始读取后台数据 然后前端加载

但是 用鼠标滚轮滚动的时候  到底部会一次性触发很多次请求。。。然后传后台的分页参数和获取的数据都是重复的。。

求解决方案

Answer 1

<script type="text/javascript">
    //滚动条到顶部
    function getScrollTop(){
        var scrollTop = 0, bodyScrollTop = 0, documentScrollTop = 0;
        if(document.body){
            bodyScrollTop = document.body.scrollTop;
        }
        if(document.documentElement){
            documentScrollTop = document.documentElement.scrollTop;
        }
        scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop;
        return scrollTop;
    }
    //文档的总高度
    function getScrollHeight(){
        var scrollHeight = 0, bodyScrollHeight = 0, documentScrollHeight = 0;
        if(document.body){
            bodyScrollHeight = document.body.scrollHeight;
        }
        if(document.documentElement){
            documentScrollHeight = document.documentElement.scrollHeight;
        }
        scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight;
        return scrollHeight;
    }
    //浏览器视口的高度
    function getWindowHeight(){
        var windowHeight = 0;
        if(document.compatMode == "CSS1Compat"){
            windowHeight = document.documentElement.clientHeight;
        }else{
            windowHeight = document.body.clientHeight;
        }
        return windowHeight;
    }
    var interval = null;
    window.onscroll = function(){
        if(interval == null) {
            interval = setTimeout("load()",1500);
        }
    };
    function load() {
        if(document.documentElement.scrollTop == getScrollTop() || document.body.scrollTop == getScrollTop()) {
            clearInterval(interval);
            interval = null;
            if(getScrollTop() + getWindowHeight() >= getScrollHeight()){
                getdata();
            }
        }
    }
    function getdata()
    {
        var actionlastid = parseInt(document.getElementById("lastid").innerHTML);
        if(actionlastid > 0) {
            $("#load-more").show();
            $.ajax({
                 ..
                
            });
        }
        return false;
    }
</script>

Answer 2

引用来自“徐清凯”的评论

var loading=false;

$(div).scroll(function(){

  if(loading==false){

    loading=true;

    $.ajax(...,function(){

      loading=false;

    });

  }

});

Answer 3

var loading=false;

$(div).scroll(function(){

  if(loading==false){

    loading=true;

    $.ajax(...,function(){

      loading=false;

    });

  }

});