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

最新推荐文章于 2022-08-06 15:47:06 发布

Mw_blooming

最新推荐文章于 2022-08-06 15:47:06 发布

阅读量1.2k

点赞数

分类专栏：问题记录

本文链接：https://blog.youkuaiyun.com/Mw_blooming/article/details/83902246

版权

问题记录专栏收录该内容

10 篇文章

订阅专栏

本文分析了在使用滚动加载数据时，由于异步请求导致的数据重复显示问题，并提出了解决方案。通过引入loading标志位，确保数据加载过程中不会因滚轮触发而重复加载，提高了用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

现象：滚动页面滚动条，再刷新页面，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标志位的原因是：感觉这就是一个几率问题，就看你线程如何神操作了，两个锁，更安心！笑哭。。。。。