正常情况:网页拉到底部后,点击刷新按钮或F5,页面内容重复显示

 

重复显示后:

网页拉到底部后,点击刷新按钮或F5,页面内容重复显示

产生问题的原因:queryActs()----queryActsAdd() 进入到改方法中了,但是还没走到flag=false的时候,scoll触发,此时的flag = true,因此又加载了一次queryActsAdd方法。【是不是就是类似于高并发的时候没有加锁导致的数据异常】

解决方案:加loading标志位,

与flag(原有)标志位的区别:详情见代码

加锁!!!!

var flag = true;
var loading=false;
queryActs();

function queryActs(){
   pageNum = 1;
   flag = true;
   $("#acts_timeline").html("");
   !loading&&queryActsAdd();
}

function queryActsAdd() {

    var uid = 
    var url = 
    
    loading=true;
    $.ajax({
        type : "POST", // 提交方式
        // async:false,
        data : {
            pageNum : pageNum,
            level : activityLevel,
            status : activityStatus
        },
        dataType : 'json',
        url : url,
        success : function(obj) {// 返回数据根据结果进行相应的处理
            var totalRecord = obj.total;
            $("#total_record").html(totalRecord);  //设置总数
            loading=false;
            //无活动数据时
            if(totalRecord==0){
                //显示无活动提示图片
                $("#acts_timeline").append("<div class='act-no tc'>现在还没有活动哦~~</div>");
                flag = false;
            }else{      //有活动数据时
                var totalPages = obj.pages; //总页数
                if(obj.pageNum >= totalPages){
                    flag = false;//当和总页数相等时不再滚动加载
                }
                
                var htmlTemp = template('actsTimelineTemplate', obj);
                $("#acts_timeline").append(htmlTemp);
                
            }
        }
    });
}


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

        if(flag===true){
            pageNum = pageNum + 1;
            !loading&&queryActsAdd();
        }

    }
});


 

 

相关文章: