Ajax获取的数据在jsp页面上重复显示

现象：滚动页面滚动条，再刷新页面，jsp上重复显示同一条数据（偶发）

Ajax返回的数据正常！

正常情况下：

 

重复显示后：

 

 

原代码如下，屏蔽了一些无关紧要的，所以显得代码有点乱.......

var flag = true;
queryActs();
function queryActs() {
     pageNum = 1;
     flag = true;
     ...............
     queryActsAdd()
}
function queryActsAdd() {
    var uid = 
    var url = 
    $.ajax({
        type : "POST", 
        data : {
            pageNum : pageNum,
            ......
        },
        dataType : 'json',
        url : url,
        success : function(obj) {
            var totalRecord = ........
            ........
            //无活动数据时
            if(totalRecord==0){
                ...........
                flag = false;
            }else{     
                var totalPages = ........; //总页数
                if(obj.pageNum >= totalPages){
                    flag = false;//当和总页数相等时不再滚动加载
                }  
                 .........
            }
        }
    });
}

//滚动加载数据
$(window).scroll(function() {
    if ($(document).scrollTop() >= $(document).height() - $(window).height()) {
        console.log(flag);
        if(flag == true){
            pageNum = pageNum + 1;
            queryActsAdd()
        }
    }
});

---

 

分析：

用flag标志位来确定scroll动作触发时（滚动时）会不会在重新add。

该现象产生的原因：由于queryActsAdd中的Ajax请求是异步的，若当请求已经发送，但数据还未返回时，触发了滚轮，那么此时的flag仍为true，因此scroll会再调用一次queryActsAdd方法    -------------------导致内容重复显示

是不是相当于并发的时候没有加锁

解决方案

代码如下

var flag = true;
var loading = false;
queryActs();
function queryActs() {
     pageNum = 1;
     flag = true;
     ...............
     !loading&&queryActsAdd();
}
function queryActsAdd() {
    var uid = 
    var url = 
    loading = true;
    $.ajax({
        type : "POST", 
        data : {
            pageNum : pageNum,
            ......
        },
        dataType : 'json',
        url : url,
        success : function(obj) {
            var totalRecord = ........
            ........
            loading=false;
            //无活动数据时
            if(totalRecord==0){
                ...........
                flag = false;
            }else{     
                var totalPages = ........; //总页数
                if(obj.pageNum >= totalPages){
                    flag = false;//当和总页数相等时不再滚动加载
                }  
                 .........
            }
        }
    });
}

//滚动加载数据
$(window).scroll(function() {
    if ($(document).scrollTop() >= $(document).height() - $(window).height()) {
        console.log(flag);
        if(flag == true){
            pageNum = pageNum + 1;
            !loading&&queryActsAdd();
        }
    }
});

新增loading标志位

与flag的不同之处：

flag首先默认置true，当达到某种条件时，才变成false，但是滚动加载时，flag为true才能进入方法，在某种时间差下，flag无法起到应有的控制效果。

loading：

loading首先置flase

一执行queryActsAdd方法，便将loading置true，防止此时滚动加载，当data到来时再将权限放开

loading的锁定效果比flag更好

没有删除flag标志位的原因是：感觉这就是一个机率问题，就看你线程如何神操作了，两个锁，更安心！笑哭。。。。。