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標誌位的原因是：感覺這就是一個機率問題，就看你線程如何神操作了，兩個鎖，更安心！笑哭。。。。。