滚动条底部刷新的实现和防止重复刷新的办法

最新推荐文章于 2023-09-01 11:10:11 发布

潮神

最新推荐文章于 2023-09-01 11:10:11 发布

阅读量1k

点赞数

分类专栏： jquery 文章标签： jquery

本文链接：https://blog.csdn.net/qinchaoguang123456/article/details/38126057

版权

jquery 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<span style="font-family: Arial, Helvetica, sans-serif;">	</span><span style="font-family: Arial, Helvetica, sans-serif;">今天做项目的时候用到了滚动条到页面的部自动刷新数据的功能，一开始写的代码是这样的：</span>

<!--这是底部的标志标签-->

<pre name="code" class="javascript"><div class='jq-load'></div>

我是通过times++来加载数据，以确保每次刷新的数据不重复，但是这样写会有一个bug，就是每次快速下拉滚动条再上拉，就会出现重复的数据，原因是在快速反复拉动滚动条时，会触发两次scroll中的ajax提交，并且是在第一次的times还没有++第二次ajax提交就已经执行了，后来换如下代码：

<script type="text/javascript">
            $(document).ready(function(){
                var times=0;
                var flag=1;
                var lock=1;
                $(document).scroll(function(){
                    //获取绑定事件元素距离文档顶部的距离
                    var top = $(".jq-load").offset().top;
                    // 获取屏幕高度
                    var wh = $(window).height();
                    //计算滚动距离加上0.8倍的屏幕高(为了让元素出来一部分后再激发)
                    var sTop = $(document).scrollTop()+0.5*wh;
                    //判断是否滚动到元素位置
                    if(sTop >= top){
                    //出发绑定事件元素对应事件（注:trigger()只能触发已绑定事件）
                        if(flag==1&&lock==1){
                            lock=0;
                            $.get("<?=U('Guide/jqload')?>",{times:times,sub_id:"<?=$sub_id?>"},function(data){
                                if(data=='null'){
                                    flag=0;
                                }else{
                                    times++;
                                    $("#jq_load").append(data);
                                    lock=1;
                                }
                            });
                        }
                    }
                });
            });
</script>

后来在代码中加了lock这个类似于锁的标志，在第一次触发ajax时lock=0，表示锁住了，在他执行完后，lock=1，表示解锁了，所以，在进入ajax之前先判断一下锁有没有开，这样一来只有在第一次ajax执行完时才会执行第二次的ajax。这类似于线程的同步与线程锁的问题，也算是加固以前的知识。